useReducer 和 useState

Posted 2023-05-03

参考技术A 接收一个(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 来进行优化。

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

解决的问题：
可以在函数组件中添加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函数中

useState & useReducer

参考技术A 在 React 函数组件中存储内部 state 通常会使用 useState hook 传入一个初始值，在初次渲染时创建 state，之后会返回当前的 state。

下面是一个点击+1的 demo

这样写组件只能初始化一个变量，如果有多个怎么办？

每次组件渲染，执行 myUseState，如果没有触发 setState 函数，则会将初始值赋值给 state，执行 setState 后组件会再此渲染一次，此时 产生一个新的 state，值为 newState，然后将这个新的 state 返回。所以，setState 并不会改变原有的 state，而是产生一个新的 state。

如果组件内有多个 useState

useReducer 接收一个形如 (state, action) => newState 的 reducer，并返回当前的 state 以及与其对应的 dispatch 方法；

如果 state 逻辑较复杂且包含多个子值，或者下一个 state 依赖于之前的 state 时，useReducer 比 useState 更加适用。

使用 useReducer 步骤：