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 的状态更新不支持第二个回调...”当我更改状态时