不可变值
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:操作一致,更加简单,降低了用户的心智负担