第二章：React Hooks

useReducer

概述

useReducer 是 React 提供的一个高级 Hook，用于管理复杂的状态逻辑。它类似于 Redux 中的 reducer 概念，适合处理包含多个子值的状态对象或状态逻辑较复杂的场景。

基本语法

const [state, dispatch] = useReducer(reducer, initialState);
  • reducer: 一个函数，格式为 (state, action) => newState
  • initialState: 状态的初始值
  • 返回值为当前状态和一个 dispatch 方法

Reducer 函数

Reducer 是一个纯函数，接收当前状态和一个 action 对象，返回新的状态：

function reducer(state, action) {
  switch (action.type) {
    case 'INCREMENT':
      return { count: state.count + 1 };
    case 'DECREMENT':
      return { count: state.count - 1 };
    default:
      return state;
  }
}

使用示例

import { useReducer } from 'react';

function Counter() {
  const [state, dispatch] = useReducer(reducer, { count: 0 });

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

与 useState 的比较

特性useStateuseReducer
适用场景简单状态复杂状态逻辑
状态更新方式直接设置新值通过 action 派发
可预测性较低较高
代码组织分散集中

高级用法

  1. 惰性初始化：可以传递初始化函数作为第三个参数

    const [state, dispatch] = useReducer(reducer, initialArg, init);

  2. 结合 Context：可以与 useContext 结合实现全局状态管理

最佳实践

  1. 当有复杂的状态逻辑时使用
  2. 当下一个状态依赖于前一个状态时使用
  3. 当需要共享状态更新逻辑时使用
  4. 保持 reducer 纯函数特性

常见问题

  1. 性能优化：React 会确保 dispatch 函数的稳定性，可以安全地放入依赖数组
  2. 嵌套状态：处理嵌套对象时考虑使用扩展运算符保持不可变性
  3. 异步操作：需要在 reducer 外部处理异步逻辑

总结

useReducer 提供了更结构化的状态管理方式，特别适合处理复杂的状态逻辑和状态转换。它使状态更新更加可预测，并且便于测试和维护。

Last Updated::