useReducer 是 React 中的一个 Hook，它提供了一种额外的方式来管理组件的状态。与 useState 相比，useReducer 更适合处理包含多个子值的复杂状态逻辑，或者当下一个状态依赖于之前的状态时。它让状态管理逻辑外部化和中心化，使得逻辑更易于理解和维护，尤其是在大型组件或复杂交互中。

useReducer 的基本使用

useReducer 接收一个 reducer 函数和初始状态作为参数，并返回当前的状态以及一个 dispatch 函数。你可以通过调用 dispatch 函数来向 reducer 函数发送一个 action，这个 action 会告诉 reducer 如何更新状态。

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

Reducer 函数

Reducer 函数会接收当前的状态和一个 action 对象作为参数，然后根据 action 的类型来更新状态。它的形式类似于 Redux 中的 reducer。

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();
  }
}

Action 对象

Action 对象通常包含一个 type 字段来描述要执行的动作，它可以是任何值，但通常是一个字符串。根据需要，action 对象也可以包含其他的字段来传递额外的信息。

dispatch({ type: 'increment' });

示例

下面是一个使用 useReducer 的计数器示例：

import React, { 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() {
  const [state, dispatch] = useReducer(reducer, {count: 0});

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

在这个例子中，我们创建了一个计数器，它有增加和减少按钮。当点击按钮时，会调用 dispatch 函数并传递一个描述操作的 action。然后，reducer 函数根据 action 的类型来更新状态。

适用场景

管理复杂的状态逻辑，尤其是当下一个状态依赖于之前的状态时。
管理深层嵌套的对象，或者当状态逻辑分布在多个子组件中时。
在需要使用到上下文（Context）进行跨组件状态共享时，useReducer 是一个常见的选择。

总结

useReducer 提供了一种更灵活的方式来处理组件状态，尤其是在处理复杂或依赖于之前状态的逻辑时。它通过将状态更新逻辑外部化到 reducer 函数中，帮助我们组织和管理状态更新的逻辑，使代码更加清晰和易于维护。

useReducer(reducer, initialArg, init?) 的Init是什么参数

useReducer 是一个 React Hook，它接受一个 reducer 函数作为参数，并返回当前的状态与一个 dispatch 方法。useReducer 的签名可以是 useReducer(reducer, initialState) 或 useReducer(reducer, initialArg, init)。其中，第三个参数 init 是一个可选的参数，用于惰性初始化 state。

为什么需要 `init` 函数？

在某些情况下，初始状态可能依赖于一些复杂计算或者初始 props，这些操作可能比较昂贵，你不希望它们在每次组件渲染时都执行。使用 init 函数可以将这种初始化逻辑外置，init 函数仅在组件初始化时执行一次，而不是每次渲染时都执行，这样可以提高性能。

`init` 函数的工作方式

init 函数接受 initialArg 作为参数，并返回初始状态。useReducer 的签名变为 useReducer(reducer, initialArg, init) 时，React 将 initialArg 传递给 init 函数，然后使用 init 函数的返回值作为初始状态。

示例

以下是一个使用 init 函数初始化 state 的例子：

import React, { useReducer } from 'react';

// reducer 函数
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();
  }
}

// init 函数
function init(initialCount) {
  return { count: initialCount };
}

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

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

在这个例子中，Counter 组件接受一个 initialCount prop。这个 prop 通过 init 函数转换成了组件的初始状态。这样，即使 initialCount 的计算非常复杂，它的计算逻辑也只会在组件初始化时执行一次，而不会在每次组件重新渲染时执行。

总结

init 参数在 useReducer 中用于惰性初始化 state。它允许你将复杂的初始化逻辑外置，以提高性能。通过将初始化参数 initialArg 传递给 init 函数，你可以基于这个参数计算出初始状态，这个初始状态将用于组件的首次渲染。

详解介绍React中的useReducer