React 中的狀態管理：何時使用 useState、useReducer 和 useRef

管理狀態是開發 React 應用程式的基本面向。了解何時使用 useState、useReducer 或 useRef 可以大幅提高應用程式的效能和可維護性。本文探討了每個鉤子並提供了有關其適當用例的指導。

React 狀態管理簡介

React 提供了多個用於管理功能元件中的狀態和其他副作用的鉤子，每個鉤子都有不同的用途並適合不同的場景。

1. useState：管理簡單的狀態轉換

useState 是 React 中管理狀態最直接的鉤子。它非常適合處理簡單的狀態轉換，其中下一個狀態不依賴前一個狀態。

• 用例：

  • 本地表單值
  • 切換（例如，顯示/隱藏、啟用/停用）
  • 任何其他不涉及複雜邏輯或深度更新的簡單狀態

• 範例：
  
  

  function ToggleComponent() {
    const [isToggled, setToggle] = useState(false);

    return (
      <button onClick={() => setToggle(!isToggled)}>
        {isToggled ? 'ON' : 'OFF'}
      </button>
    );
  }
    ```



## 2. useReducer: Managing Complex State Logic

`useReducer` is more suited for cases where the next state depends on the previous one, or when the state logic is complex, involving multiple sub-values or when the next state depends on multiple previous states.

- **Use Cases**:
  - Complex forms or user inputs
  - States that depend on previous states
  - Handling multiple states tightly coupled together

- **Example**:



```jsx
function Counter() {
  const [state, dispatch] = useReducer((state, action) => {
    switch (action.type) {
      case 'increment':
        return { count: state.count + 1 };
      case 'decrement':
        return { count: state.count - 1 };
      default:
        throw new Error();
    }
  }, { count: 0 });

  return (
    <>
      Count: {state.count}
      <button onClick={() => dispatch({ type: 'increment' })}>+</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>-</button>
    </>
  );
}

3. useRef：存取 DOM 節點並儲存可變值

useRef 用於直接存取 DOM 節點並在組件的生命週期內保留任何可變值。它的用途不僅僅是參考。

• 用例：

  • 管理焦點、文字選擇或媒體播放
  • 觸發命令式動畫
  • 儲存更新時不會導致重新渲染的可變值

• 範例：
  
  

function TextInputWithFocusButton() {
  const inputEl = useRef(null);

  const onButtonClick = () => {
    // `current` points to the mounted text input element
    inputEl.current.focus();
  };

  return (
    <>
      <input ref={inputEl} type="text" />
      <button onClick={onButtonClick}>Focus the input</button>
    </>
  );
}

結論：選擇正確的狀態管理鉤子

在 React 中，選擇正確的狀態管理鉤子取決於狀態的複雜性以及它與其他狀態或元件生命週期的互動方式。 useState 非常適合簡單狀態，useReducer 用於更複雜的狀態交互，useRef 用於管理引用和可變資料而無需重新渲染。

最後的想法

了解何時以及為何使用每個 React hook 進行狀態管理不僅會讓你的程式碼更乾淨、更有效率，而且更容易維護和調試。嘗試使用這些鉤子來找到在 React 應用程式中管理狀態的最有效方法。

以上是React 中的狀態管理：何時使用 useState、useReducer 和 useRef的詳細內容。更多資訊請關注PHP中文網其他相關文章！