[React] 介绍一下 useReducer

[hankliu62]

useReducer是 React Hooks 的一个部分，它为状态管理提供了一个更加灵活的方法。useReducer特别适合处理包含多个子值的复杂状态逻辑，或者当下一个状态依赖于之前的状态时。与useState相比，useReducer更适合于复杂的状态逻辑，它使组件的状态管理更加清晰和可预测。

基础使用：

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

• state：当前管理的状态。
• dispatch：一个允许你分发动作(action)来更新状态的函数。
• reducer：一个函数，接受当前的状态和一个动作对象作为参数，并返回一个新的状态。
• initialState：初始状态值。

Reducer 函数：

Reducer 函数的格式如下：

function reducer(state, action) {
  switch (action.type) {
    case "ACTION_TYPE": {
      // 处理动作并返回新的状态
      return newState;
    }
    // 更多的动作处理
    default:
      return state;
  }
}

动作（Action）：

动作通常是一个包含type字段的对象。type用于在 reducer 函数中标识要执行的动作。动作对象也可以包含其他数据字段，用于传递动作所需的额外信息。

示例：

以下是一个使用useReducer的简单示例：

import React, { useReducer } from "react";

// 定义reducer函数
function counterReducer(state, action) {
  switch (action.type) {
    case "increment":
      return { count: state.count + 1 };
    case "decrement":
      return { count: state.count - 1 };
    default:
      return state;
  }
}

function Counter() {
  // 初始化状态和dispatch函数
  const [state, dispatch] = useReducer(counterReducer, { count: 0 });

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

在上面的例子中，我们创建了一个简单的计数器。当用户点击按钮时，会分发一个包含type的动作到useReducer钩子。然后，reducer函数根据动作type来决定如何更新状态。

使用场景：

• 管理局部组件的状态。
• 处理复杂的状态逻辑。
• 当前状态依赖上一状态时，可以通过上一状态计算得到新状态。

useReducer通常与Context一起使用可以实现不同组件间的状态共享，这在避免 prop drilling（长距离传递 prop）的同时使状态更新更为模块化。