React-setState的那些事儿
关于setState,使用过react的人应该再熟悉不过了,在hooks还不那么普及的时候,除了使用函数式组件,我们使用最多的应该就是类创建react的组件了,而在类组件中我们通常会使用state来管理组件的数据变化及更新。
setState的使用注意事项
setState(updater, callback)
这个方法是用来告诉react组件数据更新渲染。
在使用setState
改变状态之后,立刻通过this.state
去拿最新的状态往往可能并不容易拿到的。
要点1:
基于此如果需要拿到最新的state,根据官方给的方法就是在‘componentDidUpdate或者在setState的第二个参数的回调函数中获取
componentDidMount(){
this.setState({
date: 3,
}, function(){
console.log('callback',this.state.date) // date为 3
});
console.log('fn',this.state.date) // date为1
}
要点2:
对于同时累加多次的问题
componentDidMount(){
this.setState({
date: this.state.date + 1,
});
this.setState({
date: this.state.date + 1,
});
this.setState({
date: this.state.date + 1,
});
}
// 最后date的值只累加了一次,为2
我们的目标值可能是4,但是react最后给出的与我们目标值不一样,这是因为react为了考虑性能问题,防止重复渲染将setState方法统一在渲染前统一进行,之后再进行render
如果想要得到4,推荐再setState传function
componentDidMount(){
this.setState((state) => {
return {date: state.date + 1}
});
this.setState((state) => {
return {date: state.date + 1}
});
this.setState((state) => {
return {date: state.date + 1}
});
} // 最后得到目标值4
那么setState是同步的还是异步的?
从上面我们发现当我们在setState后没法立即拿到我们设置的值,可能很多人想说,因为setState是异步的。情况真的是这样吗,看下面的例子
// 定时器中
componentDidMount(){
setTimeout(() => {
this.setState({
date: 2
});
console.log('1111', this.state.date) // date为2
})
} // 或者监听函数
componentDidMount(){
document.getElementById('button').addEventListener('click', this.clicks)
} clicks = () => {
this.setState({
date:3,
})
console.log('addEventListener', this.state.date); // date为3
}
我们发现在在定时器或者是监听函数等原生方法中时,当我们设置setState,我们是可以同步的拿到最新的state的值得。
而根据react源码,和我个人的理解setState是其实用同步的操作来模仿的异步的行为。
我们知道react为了兼容各种浏览器,同时为了性能的考量有自己的合成事件,譬如onClick、onChang之类的。当我们在生命周期中或者合成事件中,setState将变成异步的行为,而在js原生事件中setState将变成同步的。
那react是如何区分的呢,其实可以简单的理解为,react对于异步的setState会给方法打上一个isBatchingUpdates,并将它放在一个处理state的队列中,当react其他任务执行完需要开始渲染前,将循环处理队列中的方法,同时更新state
而对于同步的setState则进行直接更新。
参考
React-setState的那些事儿的更多相关文章
- 动态修改JS对象的值及React setState
一.在JS里使用(非ES6) 实现场景: 给一个空对象填充某一指定数组内的值 并随机生成数量 const fruit = ['apple', 'banana', 'orange'] let fruit ...
- 深入研究React setState的工作机制
前言 上个月发表了一篇 React源码学习--ReactClass,但是后来我发现,大家对这种大量贴代码分析源码的形式并不感冒.讲道理,我自己看着也烦,还不如自己直接去翻源码来得痛快.吸取了上一次的教 ...
- react组件通信那些事儿
父组件是调用组件的组件.现在看来,感觉父组件就是一个壳子,定义好壳子里面会有什么,而子组件是一个具体的实现,说明,会用到什么东西,如果有这些东西,会进行什么操作.总之,父组件是材料,有水和泥,子组件告 ...
- [Web 前端] 我不再使用React.setState的3个原因
copy from : https://blog.csdn.net/smk108/article/details/85237838 从几个月前开始,我在新开发的React组件中不再使用setState ...
- 关于React setState的实现原理(二)
React中的Transaction 大家学过sql server的都知道我们可以批量处理sql语句,原理其实都是基于上一篇我们说的Datch Update机制.当所有的操作均执行成功,才会执行修改操 ...
- 关于React setState的实现原理(三)
前面提到事务即将结束时,会去调用FLUSH_BATCHED_UPDATES的flushBatchedUpdates方法执行批量更新,该方法会去遍历dirtyComponents,对每一项执行perfo ...
- 关于React setState的实现原理(一)
前言 首先在学习react的时候就对setSate的实现有比较浓厚的兴趣,那么对于下边的代码,可以快速回答吗? class Root extends React.Component { constru ...
- react setState修改嵌套对象
在react使用setState过程中,难免会遇到复杂的数据类型,,这里还要提醒一下setState 是异步操作行为,需要setState之后的结果做为参数,请求数据的话,可以配合 async aw ...
- react setState里的作用域
从接触racet开始,我们就认识了setState,它是对全局变量进去更新的一个重要方法, 不仅可以更新数据,还能在更新后执行方法时直接调用刚刚更新的数据 今天碰到的问题就在于它的作用域的先后问题 先 ...
- React setState和修改props触发的钩子
1. setState的改变会触发4个生命周期钩子 shouldComponentUpdatecomponentWillUpdaterendercomponentDidUpdate 2. props的 ...
随机推荐
- 1016 Phone Bills
A long-distance telephone company charges its customers by the following rules: Making a long-distan ...
- 拿到蚂蚁金服的offer是一种什么体验?3年Java程序员分享面经
前言:我是一名三年的Java程序员,之前一直是在外包公司工作的.在这个月五号的时候,通过我的学长做内推,有了去蚂蚁金服面试的机会.我是在12号接到的电话面试的,因为蚂蚁金服需要7天的简历评估的.还有就 ...
- 【Java注解】@PostConstruct 注解相关
不多逼逼,直接看注解上面的文档, @PostConsturct PostConstruct注释用于需要执行的方法在依赖注入完成后执行任何初始化.这个方法必须在类投入服务之前调用. 这个所有支持依赖关系 ...
- hdu 1298 字典树 + DFS (模拟T9文本输入)
题意: 给你一些按键顺序,让你输出每一步中概率最大的那个单词,这里的概率计算方 法好好看看别弄错了,一开始就是因为弄错了,各种wa,比如 abc 1 ,ab 1,那么 ab 的概率就是2 ...
- Python脚本模拟登陆DVWA
目录 requests模拟登陆 Selenium自动化测试登陆 环境:python3.7 windows requests模拟登陆 我们登陆DVWA的时候,看似只有一步:访问网站,输入用户名和密码,登 ...
- 异步访问技术Ajax(XMLHttpRequest)
目录 AJAX XMLHttpRequest Ajax向服务器发送请求 Ajax接收服务器响应 AJAX - onreadystatechange 事件 使用 Callback 函数 一次Ajax请求 ...
- Java中常见的包
目录 JDK自带的包 第三方包 JDK自带的包 JAVA提供了强大的应用程序接口,既JAVA类库.他包含大量已经设计好的工具类,帮助程序员进行字符串处理.绘图.数学计算和网络应用等方面的工作.下面简单 ...
- 指定的服务已标记为删除 寒江孤钓<<windows 内核安全编程>> 学习笔记
运行cmd:"sc delete first" 删除我们的服务之后, 再次创建这个服务的时候出现 "指定的服务已标记为删除"的错误, 原因是我们删除服务之前没有 ...
- calc 用法以及原理
CSS3 的 calc() 函数允许我们在属性值中执行数学计算操作.例如,我们可以使用 calc() 指定一个元素宽的固定像素值为多个数值的和. 它是CSS预处理器 .foo { width: 100 ...
- 【python】Leetcode每日一题-删除排序链表中的重复元素
[python]Leetcode每日一题-删除排序链表中的重复元素 [题目描述] 存在一个按升序排列的链表,给你这个链表的头节点 head ,请你删除所有重复的元素,使每个元素 只出现一次 . 返回同 ...