useReducer 和 useState

useReducer 是另一种可选方案，它更适合用于管理包含多个子值的 state 对象。

const [state, dispatch] = useReducer(reducer, initialArg, init);

接收一个(state, action)=>newState的reducer，返回当前state及配套dispatch

优势：
1、处理复杂逻辑的state及state间有依赖的
2、给那些触发深更新的组件做新能优化；因为你可以向子组件传递 dispatch 而不是回调函数；也就是如何避免向下传递回调？
在大型的组件树中，我们推荐的替代方案是通过 context 用 useReducer 往下传一个 dispatch 函数

React 会确保 dispatch 函数的标识是稳定的，并且不会在组件重新渲染时改变；

初始化useReducer的state：
1、将初始 state 作为第二个参数传入 useReducer 是最简单的方法；React 不使用 state = initialState 这一由 Redux 推广开来的参数约定。
2、惰性初始化：需要将 init 函数作为 useReducer 的第三个参数传入，这样初始 state 将被设置为 init(initialArg)；这么做可以将用于计算 state 的逻辑提取到 reducer 外部，这也为将来对重置 state 的 action 做处理提供了便利

跳过dispatch
如果 Reducer Hook 的返回值与当前 state 相同，React 将跳过子组件的渲染及副作用的执行。（React 使用 Object.is 比较算法 来比较 state。）

需要注意的是，React 可能仍需要在跳过渲染前再次渲染该组件。不过由于 React 不会对组件树的“深层”节点进行不必要的渲染，所以大可不必担心。如果你在渲染期间执行了高开销的计算，则可以使用 useMemo 来进行优化。

===============================================

useState

解决的问题：
可以在函数组件中添加state而不必转换成class组件

该使用单个还是多个state变量？
1、如果使用单个state变量，需要手动合并
function handleWindowMouseMove(e) {
// 展开 「...state」 以确保我们没有 「丢失」 width 和 height
setState(prevState => ({ ...prevState, left: e.pageX, top: e.pageY }));
}
2、或者可以拆分成多个state变量
const [position, setPosition] = useState({ left: 0, top: 0 });
const [size, setSize] = useState({ width: 100, height: 100 });

useState特点：
1、调用 useState 方法的时候做了什么? 它定义一个 “state 变量”，和class里的state功能相同，函数退出后state会被React保留，而不会消失；
2、useState的参数就是初始state，class中的state是个对象，而useState中的state可以是数字、字符串、对象；
3、sueState的返回值为当前state以及更新state的函数，与class 的区别是要成对的获取
4、class中的this.state是合并，而hooks中的state是替换

为什么叫useState而不是createState?
1、create可能不准确，因为state只在组件首次渲染的时候被创建，在下次重新渲染时，useState返回给我们当前的state。这个也是hook的名字总是以use开头的原因；
2、我们将在后面的 Hook 规则中了解原因。
3、你可能会好奇 React 怎么知道 useState 对应的是哪个组件，因为我们并没有传递 this 给 React。我们将在 FAQ 部分回答这个问题以及许多其他问题

React 保持对当先渲染中的组件的追踪。多亏了 Hook 规范，
每个组件内部都有一个「记忆单元格」列表。它们只不过是用来存储一些数据的 JavaScript 对象。当你用 useState() 调用一个 Hook 的时候，它会读取当前的单元格（或在首次渲染时将其初始化），然后把指针移动到下一个。这就是多个 useState() 调用会得到各自独立的本地 state 的原因

==============

区别：如果修改规则比较复杂，那么将复杂规则放在reducer中使用useReducer比较合适，如果使用的规则比较简单，则可以使用useState的更新state函数中