关于React的setState

不可变值

state必须在构造函数中定义
在setState之前不能修改state的值，不要直接修改state,使用不可变值

---

可能是异步更新

• 直接使用时异步的

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

• 在setTimeout中setState是同步的

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

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

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)
}

---

可能被合并

如下例子

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

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

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

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：操作一致，更加简单，降低了用户的心智负担