react 中的 setState

一.为什么使用setState?

在开发react项目时,我们并不能直接通过修改state的值来让界面发生更新,

  1. 修改了state之后,希望React根据最新的State来重新渲染界面,但是这种方式的修改React并不知道数据发生了变 化;
  2. React并没有实现类似于Vue2中的Object.defineProperty或者Vue3中的Proxy的方式来监听数据的变化;
  3. 需要通过setState来告知React数据已经发生了变化, setState方法是从Component中继承过来的:
    在这里插入图片描述

二.setState异步更新在这里插入图片描述以上可见setState是异步的操作,我们并不能在执行完setState之后立马拿到最新的state的结果;

为什么会设计成异步的呢?

1.setState设计为异步,可以显著的提升性能;如果每次调用 setState都进行一次更新,那么意味着render函数会被频繁调用,界面重新渲染,这样效率是很低的;最好的办法应该是获取到多个更新,之后进行批量更新;
2.如果同步更新了state,但是还没有执行render函数,那么state和props不能保持同步; state和props不能保持一致性,会在开发中产生很多的问题;

如何获取异步更新的结果?
方式一: setState的回调函数

  1. setState接受两个参数:第二个参数是一个回调函数,这个回调函数会在更新后会执行;
  2. 格式如下:setState(partialState, callback)在这里插入图片描述

方式二: componentDidUpdate 生命周期函数中获取
在这里插入图片描述

三.setState一定是异步吗?

验证一:在setTimeout中的更新:
在这里插入图片描述
验证二:原生DOM事件:
在这里插入图片描述
源码相关代码可查看:
在这里插入图片描述

通过以上分析可以得出:

组件生命周期或React合成事件中,setState是异步
setTimeout或者原生dom事件中,setState是同步

四.setState中数据的合并

源码中其实是有对 原对象 和 新对象进行合并的:
在这里插入图片描述
多个state的合并:
在这里插入图片描述
在这里插入图片描述

五. setState的不可变的力量

在这里插入图片描述

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值