1. useState

useState 是 React 提供的最基本的 Hook，用于在函數組件中添加狀態管理。它返回一個狀態變量和一個更新狀態的函數。

1.1. 使用場景

適合管理簡單的狀態。

適合管理組件內部的局部狀態。

1.2. 示例代碼

import React, { useState } from 'react';function Counter() {const [count, setCount] = useState(0);return (<div><p>Count: {count}</p><button onClick={() => setCount(count + 1)}>Increment</button><button onClick={() => setCount(count - 1)}>Decrement</button></div>)
}

2. useReducer

useReducer 是 useState 的替代方案，適合用于管理更復雜的狀態邏輯。它通過 reducer 函數來管理狀態，類似于 Redux。

如果我們組件內部狀態足夠多，那么狀態會逐漸趨于復雜，這時，我們需要更好的編程范式來解決狀態存儲與更新。如果之前使用過 Redux，React 單向數據流告訴了我們，狀態的管理需要注意以下幾點：

1. 使用一個對象存儲變量（state）；

2. 訂閱模式實現對于該對象的變更響應處理（reducer）；

3. 定義更改對象變更的動作（action）；

4. 訂閱該對象的變更，完成狀態到視圖的映射（ui = fx(state))；

用一句話來概括：狀態由 useReducer 借助 reducer 生效，狀態的變更由 dispatch 發起，最終狀態變更驅動視圖更新。

2.1. 使用場景

適合管理復雜的狀態邏輯。

狀態更新依賴于先前狀態。

2.2. 示例代碼

import React, { useReducer } from 'react';
const initialState = { count: 0 };
function reducer(state, action) {switch (action.type) {case 'INCREMENT':return {