React基础Hook之useReducer理解（一）

什么是Hook？引入官网的介绍

Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。

除了基础的Hook如：useState、useEffect，useContext之外，官方还提供了很多其他的Api，这次只要来讲的是这个useReducer。

源起

说明reducer之前，先从这个单词说起。回忆一下在数组的基础方法中有一个reduce方法说明

// 方法对数组中的每个元素执行一个由您提供的reducer函数(升序执行)，将其结果汇总为单个返回值。
let numbers = [1, 2, 3];
let sum = numbers.reduce((total, number) => {
    return total + number;
}, 0)

此方法接收两个参数，回调函数和初始值。

1. 回调函数

   • accumulator
     累计器累计回调的返回值; 它是上一次调用回调时返回的累积值，或initialValue。
   • currentValue
     数组中正在处理的元素。

2. 初始值

useReducer

useReducer返回一个包含2个元素的数组，类似于useState。 第一个是当前状态，第二个是dispatch方法

const { useReducer } = React;
// 实现一个简易版本的计数器
const Counter = props => {
 const reducer = (state, action) => state + action;

 const initialArg = 0;
 // useReducer
 const [state, dispatch] = useReducer(reducer, initialArg);
 return <button onClick={() => dispatch(1)}>当前值为:{state}</button>;
};

ReactDOM.render(<Counter />, document.getElementById('app'));

通过以上代码可以看到useReducer通过dispatch触发reducer数据的改变。在reducer方法中state表示上一次的状态值，action表示传递的参数。state的值可以是一个数字当然也可以是一个对象，同样的action也是如此。
我们换一种方式实现reducer，把state状态数据初始化为一个对象，action设置为一个包含有type属性的对象。

const { useReducer } = React;

const Counter = props => {
  // 实现一个简易版本的计数器
  const reducer = (state, action) => {
    switch (action.type) {
      case 'COUNT_PLUS':
        return { ...state, count: state.count + action.payload };
      case 'COUNT_REDUCE':
        return { ...state, count: state.count - action.payload };
      default:
        return state;
    }
  };
  const initialArg = { count: 0 };
  const [state, dispatch] = useReducer(reducer, initialArg);
  return (
    <button onClick={() => dispatch({ type: 'COUNT_PLUS', payload: 1 })}>
      当前值为:{state.count}
    </button>
  );
};
ReactDOM.render(<Counter />, document.getElementById('app'));

以上代码看起来是不是和redux的写法很像了。redux是用来做全局状态管理，跨组件之间传参的。同样的，使用useContext+useReducer也可以实现redux的功能。接下来的内容来简单介绍下两者useContext+useReducer相结合，实现全局状态共享。