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)

									}