关于React的setState

闻人放歌2024-07-31 19:39

不可变值

state必须在构造函数中定义

在setState之前不能修改state的值，不要直接修改state,使用不可变值

可能是异步更新

直接使用时异步的

javascript 复制代码

this.setState({
	count: this.state.count + 1
}, () => {
	console.log('count by callback', this.state.count) // 回调函数
})
console.log('count', this.state.count) // 异步的，拿不到最新值

在setTimeout中setState是同步的

javascript 复制代码

setTimeout(() => {
	this.setState({
		count: this.state.count + 1
	})
	console.log('count', this.state.count) // 在settimeout中打印值正确
}, 0)

自己定义的DOM事件，setState是同步的

javascript 复制代码

clickHandler = () => {
	this.setState({
		count: this.state.count + 1
	})
	console.log('count in body event', this.state.count);
}
componentDidMount() {
	document.body.addEventListener('click', this.clickHandler)
}

componentWillUnmount() {
	document.body.removeEventListener('click', this.clickHandler)
}

可能被合并

如下例子

直接使用 - 传入对象会合并

javascript 复制代码

this.setState({
	count: this.state.count + 1
})
this.setState({
	count: this.state.count + 1
})
this.setState({
	count: this.state.count + 1
})

console.log(this.state.count) // 1

传入函数 - 函数不能被合并

javascript 复制代码

this.setState((prevState, props) => {
	return {
		count: prevState.count + 1
	}
})
this.setState((prevState, props) => {
	return {
		count: prevState.count + 1
	}
})
this.setState((prevState, props) => {
	return {
		count: prevState.count + 1
	}
})
console.log(this.state.count) // 3

React18

React组件事件：异步更新+合并state
DOM事件，setTimeout:异步更新+合并state
Automatic Batching 自动批处理

总结

React <= 17：只有React组件事件才批处理
React18: 所有事件都自动批处理 Automatic Batching
React18：操作一致，更加简单，降低了用户的心智负担