type
status
date
slug
summary
tags
category
icon
password
useState 的基本用法
useState主要用于给组件添加状态变量。注意，我们只能在组件的顶层或自定义的 Hooks 中调用useState。初始化状态
基础定义
懒初始化
对于需要计算得到的初始状态，可以使用函数传递给
useState。这样，函数只在初次渲染时执行，而非每次渲染。更新状态
直接更新vs函数式更新
大部分情况，直接更新状态即可：
但当新状态依赖于前一个状态时，推荐使用函数式更新。这确保了更新准确性，特别是在并发模式下。
以下两个例子展示函数式更新的重要性：
对象与数组的更新
对象和数组的更新需要创建新的引用，而不是直接修改原状态。
数的更新
把函数存储到state里是很少见的做法，但某些情况下，我们有可能需要这么做。
先看一个错误的示例：
根据上文，我们知道这样的用法是把函数的返回值存储或更新到状态中，并不是把函数存储到状态中。
如果你想在状态中存储一个函数，你需要使用一个箭头函数来“包裹”它。这是正确的做法：
那么我们什么时候会需要这样使用？这里介绍一些可能的场景：
- 可配置的行为: 你可能有一个组件，它的行为可以由父组件进行配置。在这种情况下，你可以将函数作为状态存储，以便在组件的生命周期中更改或更新它。
- 动态创建的函数: 在某些情况下，你可能需要基于组件的某些属性或状态动态创建函数。将这些函数存储为状态可以确保你只在必要时重新创建它们。
- 回调和外部交互: 如果你的组件与外部系统交互，并且需要提供回调函数，你可能希望在状态中存储这些回调函数，以便在适当的时候更改或更新它们。
- 延迟执行的函数: 在某些情况下，你可能想要在将来的某个时间点执行函数（例如，使用
setTimeout）。将函数存储为状态可以确保即使组件的其他部分发生变化，你也可以访问到最初的函数引用。
- 与第三方库的集成: 有些第三方库可能要求你提供并在后续更改函数。在这种情况下，将函数作为状态存储可能会更加方便。
- Author:老张杂货铺
- URL:https://20011102.xyz/article/guide
- Copyright:All articles in this blog, except for special statements, adopt BY-NC-SA agreement. Please indicate the source!
Relate Posts