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) 此方法接收两个参数，回调函数和初始值。 回调函数 accumulator 累计器累计回调的返回值; 它是上一次调用回调时返回的累积值，或initialValue。 currentValue 数组中正在处理的元素。 初始值 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 dispatch(1)}>当前值为:{state}; }; ReactDOM.render(, 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 ( dispatch({ type: 'COUNT_PLUS', payload: 1 })}> 当前值为:{state.count} ); }; ReactDOM.render(, document.getElementById('app')); 以上代码看起来是不是和redux的写法很像了。redux是用来做全局状态管理，跨组件之间传参的。同样的，使用useContext+useReducer也可以实现redux的功能。接下来的内容来简单介绍下两者useContext+useReducer相结合，实现全局状态共享。