useState & useReducer

Posted 2023-03-13

参考技术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 步骤：