useState & useReducer

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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 步骤:

以上是关于useState & useReducer的主要内容,如果未能解决你的问题,请参考以下文章

[React] When to useReducer instead of useState

与 useState 相比,useReducer 实际上都有哪些优势?

React 用 useReducer 替换 useState,同时还使用自定义钩子

为啥 setState 回调会抛出错误:“来自 useState() 和 useReducer() Hooks 的状态更新不支持第二个回调参数...”

ZF_react hooks useState的实现 useCallback useMemo useReducer useContext

我收到此错误:“来自 useState() 和 useReducer() Hooks 的状态更新不支持第二个回调...”当我更改状态时