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中文网其他相关文章！