useReducer React Hook

React 中的 useReducer 是一个 Hook 函数，用于管理组件中的状态，类似于 useState，但是通常更适用于管理复杂的状态，并且它提供了更多的控制能力。

使用方法

使用 useReducer 需要定义一个 reducer 函数来处理状态的变化，并提供一个初始状态。然后，将它们作为参数传递给 useReducer 函数，它将返回一个数组，数组的第一个元素是当前状态，第二个元素是 dispatch 函数，用于派发操作。

import { useReducer } from 'react';

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    default:
      throw new Error();
  }
}

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

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

参数

useReducer 接受两个参数：

1. reducer 函数：它接受两个参数，第一个是当前状态，第二个是 dispatch 函数传递来的操作对象，返回一个新的状态值。
2. initialState：用于初始化状态的值，可以是任何合法的 JavaScript 值。

返回值

useReducer 返回一个有两个值的数组：

1. 状态值：用于描述组件的当前状态。
2. dispatch 函数：用于派发操作，它接受一个操作对象，操作对象包含一个 type 字段，表示派发的操作类型，还可以包含其他自定义的字段。

使用场景

在下面的场景中，使用 useReducer 可以更好地处理组件状态：

• 状态包含多个子值，或者状态之间有复杂的依赖关系和计算逻辑。
• 状态需要经常进行深层次的嵌套更新操作。
• 组件中的某些操作需要触发多个状态变化。

注意事项

• useReducer 和 useState 是可互换的，它们都可以实现组件状态的管理。
• useReducer 不会自动进行合并更新，当你派发一个新的操作时，它会覆盖原有的状态值。
• 在 reducer 函数中，建议使用 switch...case 语句来处理各种操作类型，避免使用 if/else 语句。这样可以更清晰地描述组件状态的变化。