从工作原理入手理解React三：useReducer

什么是 Reducer

Reducer 是一种集中处理组件状态变化逻辑的机制，将分散在各事件处理逻辑中的状态变化集中管理，优化代码组织，便于代码维护和增强状态变化的可预测性。

为什么需要Reducer

在React中，组件状态的改变通过调用setState函数，在一些状态改变逻辑较多的组件中，设置状态的逻辑会较为分散，状态的改变将变得不可预测，同时代码的维护和问题排查将变得相对困难。为解决这种困境，React提出了Reducer概念，Reducer是一个函数，它接受旧的state和action（带有操作类型）的对象，在Reducer内部根据类型处理后，返回新的状态。通过维护Reducer，让状态的变化变得可维护和可预测。

如何使用Reducer

在React中，为我们提供了useReducer Hook来增强Reducer的使用。useReducer接受reducer函数、初始state和可选initFn，返回state和dispatch函数。

• Reducer：一个函数，接收state和action，返回新的state。action是一个对象，通常用type字段指定action类型。
• initFn：用于计算初始状态的函数，接收初始state，如果有initFn，那么useReducer返回的初始状态是initFn计算后的值，否则使用初始state。
• dispatch：触发状态更新的函数，接收action，在useReducer内部，将action传递给Reducer计算新的state。

useReducer内部基本实现如下：

function useReducer(reducer, initialState) {
  const [state, setState] = useState(initialState);
  const dispatch = useCallback((action) => {
    const newState = reducer(state, action);
    setState(newState);
  }, [state, reducer]);
  return [state, dispatch];
}

useReducer的使用代码如下：

//声明Reducer
function titleReducer(stete, action) {
  switch (action.type) {
    case "change":
      stete = action.value
      break;
    default:
      break;
  }
  return stete;
}
function MemoComponent() {
  //创建状态
  const [title, dispatch] = useReducer(titleReducer, "hello");
  return (
    <div>
      <h1>{title}</h1>
      {/* 触发更新 */}
      <button onClick={() => dispatch({type: "change", value: "hi"})}>change</button>
    </div>
  );
}

function App() {
  return (
    <div>
      <MemoComponent/>
    </div>
  );
}