React中setState的使用与同步异步的使用
在react中，修改状态如果直接使用this.state，不会引起组件的重新渲染，需要通过 this.setState来对组件的属性进行修改。
1、this.setState的两种定义方式
定义初始状态
state = { count: 0 },
如果此时有一个按钮，点击按钮让计数加1，我们可以有两种写法
(1)传递对象
this.setState({ count: this.state.count + 1})
(2)传递函数
this.setState((state, props) => ({ count: count + 1}))
2、setState的两种方式有什么不同?
如果变更的state的值需要依赖于上一次的state的值，这种情况就需要用到函数的形式，比如以下这种情况
addCount(){
this.setState({ count: this.state.count + 1})
this.setState({ count: this.state.count + 1})
this.setState({ count: this.state.count + 1})
}
此时只会执行一次+1的操作，因为在React内部，会将多次setState合并操作，新的state由 Object.assgin({}， {count: 0}, { count: 1}) 合并所得，以上赋值会执行三次，但因为count的值没有更新，所以最终执行的结果只+1，如果setState的赋值是函数，那情况就不一样了
addCount(){
this.setState((state, props) => ({ count: count + 1}))
this.setState((state, props) => ({ count: count + 1}))
this.setState((state, props) => ({ count: count + 1}))
}
这样的操作会得到+3的效果，因为React会进行判断，如果传入的是函数，那么将执行此函数，此时count的值就已经被修改了
3、setState是同步还是异步的?
☆☆☆☆☆ 是异步的
(1) 即我们通过this.setState修改了状态之后，在它的下一行输出state的值并不会得到新的值
(2) 为什么是异步?
有两个原因，一是提高效率，每次修改state的值都会造成render的重新渲染，将多次修改state的值合并统一更新可以提高性能；二是render的更新会晚一些，如果render中有子组件，子组件的props依赖于父组件的state，props和state就不能保持一致
(3) 如何获取异步时的state值?
① 在setState的回调函数中
this.setState({
count: this.state.count + 1}},
()=>{ console.log(this.state.count)})
② 在componentDidUpdate中获取
componentDidUpdate(){
console.log(this.state.count)
}
☆☆☆☆☆ 是同步的
(1) 即我们通过this.setState修改状态之后，在它的下一行输出state是新的值
(2) 什么场景下是同步的?
① 原生js获取dom元素，并绑定事件
<button id="addBtn">点我+1</button>
componentDidMount(){
const addBtn = document.getElementById('addBtn')
changeBtn.addEventListener('click',()=>{
this.setState({ count: this.state.count + 1})
console.log(this.state.message)
})
}
② 计时器 setTimeout
<button onClick={ e => this.addOne() }>点我+1</button>
addOne(){
setTimeout(()=>{ this.setState({ count: this.state.count + 1 })
console.log(this.state.count ) },0)
}
到此这篇关于React中setState的使用与同步异步的使用的文章就介绍到这了,更多相关React setState同步异步内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要给大家介绍了React三种避免子组件无效刷新的解决方案,使用React.memo,使用React.useMemo或React.useCallback,将子组件作为children来传递这三种方案,文章通过代码介绍的非常详细,需要的朋友可以参考下2023-08-08
本文主要介绍了React表单容器的通用解决方案，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-04-04
setState() 的执行机制包括状态合并、批量更新、异步更新、虚拟 DOM 比较和渲染组件等步骤,这样可以提高性能并优化渲染过程,这篇文章主要介绍了react中的setState的执行机制,需要的朋友可以参考下2023-10-10
这篇文章主要介绍了详解React 的几种条件渲染以及选择，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-10-10
本篇文章主要介绍了浅谈React + Webpack 构建打包优化，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-01-01
本篇文章主要介绍了VSCode 配置React Native开发环境的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-12-12
如何用webpack4.0撸单页/多页脚手架 (jquery, react, vue, typescript)
这篇文章主要介绍了如何用webpack4.0撸单页/多页脚手架 (jquery, react, vue, typescript)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-06-06
详解在React.js中使用PureComponent的重要性和使用方式
这篇文章主要介绍了详解在React.js中使用PureComponent的重要性和使用方式，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-07-07
这篇文章主要为大家介绍了React中classnames库使用示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-10-10
这篇文章主要为大家介绍了react Scheduler 实现示例教程，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-09-09
最新评论