react中的setState详解

最新推荐文章于 2024-04-30 15:42:35 发布

white-hang

最新推荐文章于 2024-04-30 15:42:35 发布

阅读量5.3k

点赞数 2

文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/weixin_46063693/article/details/122173937

版权

1.setState更新状态的2种写法

(1). setState(stateChange, [callback])------对象式的setState

1.stateChange为状态改变对象(该对象可以体现出状态的更改)

2.callback是可选的回调函数, 它在状态更新完毕、界面也更新后(render调用后)才被调用

代码展示：

import React, { Component } from 'react'

export default class Demo extends Component {

	state = {count:0}

	add = ()=>{
		//对象式的setState
		//更新状态
		this.setState({count:this.state.count+1},()=>{
			console.log(this.state.count);//3
		})
		this.setState({count:this.state.count+2},()=>{
			console.log(this.state.count);//3
		})
		this.setState({count:this.state.count+3},()=>{
			console.log(this.state.count);//3
		})
		console.log('12行的输出',this.state.count); //0 
	}

	render() {
		return (
			<div>
				<h1>当前求和为：{this.state.count}</h1>
				<button onClick={this.add}>点我+1</button>
			</div>
		)
	}
}

相信小伙伴们发现了打印的结果的不同，如果在第二个参数里打印就能拿到最新的结果，如果在对象形式的setState外面打印，却只能拿到初始值，这里表示这种情况下setState是异步的，

原因就是：

在 React 的 setState 函数实现中，会根据一个变量 isBatchingUpdates 判断是直接更新 this.state 还是放到一个updateQueue中延时更新，而 isBatchingUpdates 默认是 false，表示 setState 会同步更新 this.state；但是，有一个函数 batchedUpdates，该函数会把 isBatchingUpdates 修改为 true，而当 React 在调用事件处理函数之前就会先调用这个 batchedUpdates将isBatchingUpdates修改为true，这样由 React 控制的事件处理过程 setState 不会同步更新 this.state，而是异步的。

同样小伙伴们也发现了，明明调了三次的对象形式的setState却只取了最后一次修改的值，这是因为react内部为了优化setState()的批处理,会对setState()进行合并,并且对对相同属性的设置只保留最后一次的设置

总结：
所以说setState本身是同步的，一旦走了react内部的合并逻辑，放入了updateQueue队列中就变成异步了，而代码中的函数是react控制的，内部会走合并逻辑，所以这里的setState 不但是合并的也是异步的

相信小伙伴们就会问了，那怎么才能在异步执行的情况下，让每一次的setState调用都起效果呢，别急第二种写法就可以解决这种问题

(2). setState(updater, [callback])------函数式的setState

1.updater为返回stateChange对象的函数。

2.updater可以接收到state和props。

4.callback是可选的回调函数, 它在状态更新、界面也更新后(render调用后)才被调用。

代码展示：

import React, { Component } from 'react'

export default class Demo extends Component {

	state = {count:0}

	add = ()=>{
		//对象式的setState
		//更新状态
		//函数式的setState
		this.setState( state => ({count:state.count+1}))
		this.setState( state => ({count:state.count+2}))
		this.setState( state => ({count:state.count+3}))
		console.log('12行的输出',this.state.count); //0 
	}

	render() {
		return (
			<div>
				<h1>当前求和为：{this.state.count}</h1>
				<button onClick={this.add}>点我+1</button>
			</div>
		)
	}
}

通过执行发现当前求和值变成了6，但是最终打印结果还是0，说明这种写法还是异步的。

2.利用setTimeout绕过react内部的合并逻辑

代码展示：

import React, { Component } from 'react'

export default class Demo extends Component {

	state = {count:0}

	add = ()=>{
		//对象式的setState
		//更新状态
		setTimeout(() => {
			this.setState({count:this.state.count+1},()=>{
			console.log(this.state.count);//1
			})
			this.setState({count:this.state.count+2},()=>{
				console.log(this.state.count);//3
			})
			this.setState({count:this.state.count+3},()=>{
				console.log(this.state.count);//6
			})
			console.log('12行的输出',this.state.count); //6
		}, 100);
	}

	render() {
		return (
			<div>
				<h1>当前求和为：{this.state.count}</h1>
				<button onClick={this.add}>点我+1</button>
			</div>
		)
	}
}