React Hooks系列之useReducer

前言

react hooks 是 React 16.8 的新增特性。 它可以让我们在函数组件中使用 state 、生命周期以及其他 react特性，而不仅限于 class 组件。react hooks 的出现，标示着 react中不会在存在无状态组件了，只有类组件和函数组件。具体可查看官网。

优势：

1. 函数组件不能使用state，遇到交互更改状态等复杂逻辑时不能更好地支持，hooks让函数组件更靠近class组件，拥抱函数式编程。
2. 解决副作⽤问题，hooks出现可以处理数据获取、订阅、定时执行任务、手动修改 ReactDOM这些⾏为副作用，进行副作用逻辑。比如useEffect。
3. 更好写出有状态的逻辑重用组件。
4. 让复杂逻辑简单化，比如状态管理：useReducer、useContext。
5. 函数式组件比class组件简洁，开发的体验更好，效率更⾼，性能更好。
6. 更容易发现无用的状态和函数。

useReducer介绍

useState 的替代方案，它更适合一些逻辑较复杂且包含多个子值，或者下一个 state 依赖于之前的 state 等的特定场景。类似Redux中的功能reducer。它接收一个形如 (state, action) => newState 的 reducer，并返回当前的 state 以及与其配套的 dispatch 方法。

const [state,dispatch]=useReducer(reducer,initState,initAc tion)

参数介绍

• reducer是一个函数，就是一个函数类似 (state, action) => newState 的函数，传入 上一个 state 和本次的 action，根据action状态处理并更新state
• initState是初始化的state，也就是默认值
• initAction是useReducer初次执行时被处理的action，其实惰性初始化，这么做可以将用于计算 state 的逻辑提取到 reducer 外部，这也为将来对重置 state 的 action 做处理提供了便利

返回值state，dispath介绍

• state状态值
• dispatch是更新state的方法，他接受action作为参数。useReducer只需要调用dispatch(action)⽅法传入action即可更新state

useContext可以解决组件间的数据共享问题，而useReducer 可以解决复杂状态管理的问题，如果把他们结合起来使⽤，就可以实现redux的功能了了

useReducer使用

例子：

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 App() {
  const [state, dispatch] = useReducer(reducer, {
    count: 0
  });
  return (
    <>
      点击次数: {state.count}
      <button onClick={() => dispatch({type: 'increment'})}>+</button>
      <button onClick={() => dispatch({type: 'decrement'})}>-</button>
    </>
  );
}

注意： React 会确保 dispatch 函数的标识是稳定的，并且不会在组件重新渲染时改变。这就是为什么可以安全地从 useEffect 或 useCallback 的依赖列表中省略 dispatch。