当前位置：首页 > 科技 > 软件

UseState是干啥的？有哪些坑？

来源：责编：时间：2024-06-14 17:37:13 85观看

导读前面的笔记里面说过在React16.8之前，函数式组件里你没办法初始化并使用状态（state），在React16.8之后，useState就很好的解决了这个问题，它可以让你在函数式组件里面使用state。简单地说，你就把它当做函数组件里的setState来用

前面的笔记里面说过在React16.8之前，函数式组件里你没办法初始化并使用状态（state），在React16.8之后，useState就很好的解决了这个问题，它可以让你在函数式组件里面使用state。

简单地说，你就把它当做函数组件里的setState来用就行了基本用法：

用法很简单，代码如下：

图片

如上所示，你只需要useState传入一个初始值，然后它返回一个数组，数组第一个变量是state，数组第二个变量就是类似setState的方法我自己整理了一些使用useState需要注意的地方，可能你也需要。

注意点

初始值传入方法

这个问题是有次在我的技术群里粉丝问到的，大概就是在公司的历史代码里看到useState初始化的时候传入了一个function，感觉到这种用法很少见，后来我查阅了文档，发现这个确实很有意思。

先看看这个官方例子：

图片

上面这个例子中，state的初始化我们是使用createInitialTodos这个方法来完成的。

看下控制台，你会发现有个问题，每次todolist组件重新渲染的时候，createInitialTodos方法都会重新运行一次，但是，只有第一次的返回结果被useState使用，如果createInitialTodos在做非常耗时的计算的话，这就很消耗性能了。

所以，这里需要注意的是如果使用方法来初始化state，直接把它自身传进去就行了，不用运行它，也就是下面这样写代码：

基于最新的state来改变state

这个问题在类组件的setState中也比较常见，直接看代码：

上面这个例子，你以为调用了setAge三次，它就会从0加到3，那就大错特错了。

事实上，state这个东西你可以把它理解为一个快照（snapshot），你更新了它，但是它只会在下次render的时候才改变，也就是说你这样连着调用三次setAge(age+1)，每次取得都是当前render中的快照，相当于每次都是setAge(42+1)，所以，最终结果是43，并不是45。

那么如果我就想基于最新的state来改变state，代码可以这样写：

也就是给setAge传入方法，这个方法接受上一个状态，返回新的状态。

连续传入三次方法，这三个方法就会进入队列中并且依次执行，执行完毕之后得到45，最后就拿着45去更新age。

这个在官方文档里面也叫做批量更新state，都是使用给状态更新方法传入回调来实现的。

本文链接：//www.dmpip.com//www.dmpip.com/showinfo-26-93857-0.htmlUseState是干啥的？有哪些坑？

声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。邮件：2376512515@qq.com

上一篇：高可用解决方案详解(八大主流架构方案)

下一篇： ES14 中最具变革性的五个 JavaScript 特性

标签：

热门焦点

俄罗斯：将审查iPhone等外国公司设备保数据安全

iPhone和特斯拉都属于在各自领域领头羊的品牌，推出的产品也也都是数一数二的，但对于一些国家而言，它们的产品可靠性和安全性还是在限制范围内。近日，俄罗斯联邦通信、信息技术
十个可以手动编写的 JavaScript 数组 API

JavaScript 中有很多API，使用得当，会很方便，省力不少。你知道它的原理吗? 今天这篇文章，我们将对它们进行一次小总结。现在开始吧。1.forEach()forEach()用于遍历数组接收一参
一篇聊聊Go错误封装机制

%w 是用于错误包装（Error Wrapping）的格式化动词。它是用于 fmt.Errorf 和 fmt.Sprintf 函数中的一个特殊格式化动词，用于将一个错误（或其他可打印的值）包装在一个新的错误中。使
Flowable工作流引擎的科普与实践

一.引言当我们在日常工作和业务中需要进行各种审批流程时，可能会面临一系列技术和业务上的挑战。手动处理这些审批流程可能会导致开发成本的增加以及业务复杂度的上升。在这
之家push系统迭代之路

前言在这个信息爆炸的互联网时代，能够及时准确获取信息是当今社会要解决的关键问题之一。随着之家用户体量和内容规模的不断增大，传统的靠"主动拉"获取信息的方式已不能满足用
JavaScript学习 -AES加密算法

引言在当今数字化时代，前端应用程序扮演着重要角色，用户的敏感数据经常在前端进行加密和解密操作。然而，这样的操作在网络传输和存储中可能会受到恶意攻击的威胁。为了确保数据
网传小米汽车开始筛选交付中心建筑面积不低于3000平方米

7月7日消息，近日有微博网友@长三角行健者爆料称，据经销商集团反馈，小米汽车目前已经开始了交付中心的筛选工作，要求候选场地至少有120个车位，建筑不能低
华为Mate60标准版细节曝光：经典星环相机模组回归

这段时间以来，关于华为新旗舰的爆料日渐密集。据此前多方爆料，今年华为将开始恢复一年双旗舰战略，除上半年推出的P60系列外，往年下半年的Mate系列也将
iQOO 11S新品发布会

iQOO将在7月4日19:00举行新品发布会，推出杭州亚运会电竞赛事官方用机iQOO 11S。