useReducer解析

useState 的替代方案。它接收一个形如 (state, action) => newState 的 reducer，并返回当前的 state 以及与其配套的 dispatch 方法。

在某些场景下，useReducer 会比 useState 更适用，例如 state 逻辑较复杂且包含多个子值，或者下一个 state 依赖于之前的 state 等。

useReducer的工作原理与redux类似，不清楚的可以访问我的另一篇博客：redux

以下代码是对官方给出的useReducer hooks的测试代码

import { useReducer } from "react";  // 引入官方 useReducer hooks
// import useReducer from "./useReducer";
export default () => {
  const [count, dispatch] = useReducer(reducer, 0);// 第一个参数为reducer处理函数，第二个参数为count的初始值，只再初始化的时候执行一次，后面可以忽略
  return (
    <div>
      <h1>useReducer Test</h1>
      计数器：{count} <br /> <br />
      <button onClick={() => dispatch({ type: "increment" })}>
        click me to increment
      </button>
      <br /> <br />
      <button onClick={() => dispatch({ type: "decrement" })}>
        click me to decrement
      </button>
    </div>
  );
};

//自定义 reducer 作为 useReducer的参数，该reducer主要进行逻辑运算，将运算的结果传递给dispatch函数，dispatch函数获取到运算后的值进行数据更新
const reducer = (state, action) => {
  switch (action.type) {
    case "increment":
      return state + 1;
    case "decrement":
      return state - 1;
    default:
      return new Error();
  }
};

效果图： 

 接下来是官方关于useReducer的源码：

import { useState } from "react";

export default (reducer, initailState) => { // 暴露函数 ，接受一个reducer处理函数和初始状态值
  const [state, setState] = useState(initailState); // 创建状态值

  const dispatch = (action) => {  //创建dispatch方法
    const nextState = reducer(state, action);  // 获取经过reducer处理之后的值
    setState(nextState);  //更新状态值
  };

  return [state, dispatch];  // 返回最新状态和dispatch提交函数
};

随后可以将测试代码中的第一行代码注释，第二行代码解注，可以发现效果和引入官方的hooks一致。

官方网址： 自定义 Hook | React中文网