了解 React 的內建狀態管理

React 的內建狀態管理依賴 useState 和 useReducer 鉤子來管理元件內的狀態。詳細介紹如下：

1. useState：

   • 該鉤子用於管理本機元件狀態。它傳回一個包含兩個元素的陣列：當前狀態值和更新它的函數。
   • 範例：

    const [count, setCount] = useState(0);
   
    // Update state
    setCount(count + 1);
   

2. 使用Reducer:

   • 對於更複雜的狀態邏輯，使用useReducer。它的工作原理與 Redux 類似，接收一個減速器函數和一個初始狀態，並傳回當前狀態和一個調度函數。
   • 範例：

    const initialState = { count: 0 };
   
    function reducer(state, action) {
      switch (action.type) {
        case 'increment':
          return { count: state.count + 1 };
        case 'decrement':
          return { count: state.count - 1 };
        default:
          return state;
      }
    }
   
    const [state, dispatch] = useReducer(reducer, initialState);
   
    // Dispatch actions
    dispatch({ type: 'increment' });
   

這些鉤子有助於在元件內本地管理狀態，而不需要外部函式庫。

以上是了解 React 的內建狀態管理的詳細內容。更多資訊請關注PHP中文網其他相關文章！