UseState是干啥的?有哪些坑?

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

前面的笔记里面说过在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,都是使用给状态更新方法传入回调来实现的。

责任编辑:武晓燕 来源: 程序员耳东
相关推荐

2021-08-13 05:47:48

通信设计院通信行业设计院

2023-04-10 07:26:28

UseStateUseReducer

2019-05-20 15:44:11

盒装智商税CPU

2022-03-09 12:26:04

MySQL高可用性主备延迟

2022-09-26 07:08:16

无线通信CT

2020-02-15 15:02:44

产品技术设计团队

2023-01-06 16:36:09

编程效率语言

2024-09-10 12:15:24

2024-03-04 07:37:40

MySQL记录锁

2022-10-17 00:27:20

二叉树数组索引

2022-11-11 07:51:33

2024-04-18 08:38:15

LLM数据训练模型

2020-06-15 08:51:58

数据库存储系统

2017-08-14 16:14:57

云原生容器云平台

2024-08-26 15:31:55

2024-03-06 11:22:33

架构演进技巧

2020-09-11 10:55:10

useState组件前端

2012-09-24 10:25:42

BI软件开源软件

2024-04-03 14:56:12

生成式AI人工智能机器学习

2009-07-03 10:31:57

什么是ServletServlet API
点赞
收藏

51CTO技术栈公众号