这篇文章主要介绍“React中setState如何使用与如何同步异步”,在日常操作中,相信很多人在React中setState如何使用与如何同步异步问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”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如何使用与如何同步异步”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注编程网网站,小编会继续努力为大家带来更多实用的文章!