46.React学习笔记.hooks useReducer - useState替代方案

useReducer是useState的一种替代方案：

某些场景下，如果state的处理逻辑比较复杂，我们可以通过useReducer来对其进行拆分；
或者，这次修改的state需要依赖之前的state时，也可以使用；

一. useReducer的使用

image.png

参数一reducer纯函数
参数二initializerArg初始化值：对基本类型可以直接写；若是对象类型，先解构。

import React, { useState, useReducer } from 'react'
function reducer(state, action) {
  switch (action.type) {
    case "increment":
      return { ...state, counter: state.counter + 1 };
    case "decrement":
      return { ...state, counter: state.counter - 1 };
    default:
      return state;
  }
}
export default function Home() {
  // const [count, setCount] = useState(0);
  // state当前状态值，dispatch当想改变一个值时，
  // 给它dispatch一个action对象
  const [state, dispatch] = useReducer(reducer, { counter: 0 });
  return (
    <div>
      <h2>Home当前计数：{state.counter}</h2>
      <button onClick={e => dispatch({ type: "increment" })}>+1</button>
      <button onClick={e => dispatch({ type: "decrement" })}>-1</button>
    </div>
  )
}

当然我们也可以将reducer抽离出来，使其能够复用（共享reducer函数），但是state是函数组件个体持有的。
useReducer是useState，而不是redux的代替方案；其仅仅共享一个reducer函数。