不可变值
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) // 3React18
- React组件事件:异步更新+合并state
- DOM事件,setTimeout:异步更新+合并state
- Automatic Batching 自动批处理
总结
- React <= 17:只有React组件事件才批处理
- React18: 所有事件都自动批处理 Automatic Batching
- React18:操作一致,更加简单,降低了用户的心智负担