setState深入的使用
- 不可变值【不能改变源数据,如 push pop splice等】
- setState是同步还是异步
setState无所谓异步还是同步
看是否能命中batchUpdate机制
判断isBatchingUpdates
3.React<=17
可能是异步更新【自定义事件 ,setTimeout...】
可能会被合并
4.React18
Automatic Batching 自动批处理。全部改为 异步更新+ 合并state
- 总结
React <=17,只有组件事件才批处理。React18,所有事件都Automatic Batching 自动批处理
import React from 'react'
/***
* <=17版本才有同步,18版本改为异步
*/
class Basics05 extends React.Component{
constructor(props) {
super(props);
this.state = {
count:0
}
}
render() {
return <>
<p>{this.state.count}</p>
<button onClick={this.onAdd}>提交</button>
</>
}
componentDidMount() {
//自定义事件----同步
document.body.addEventListener('click',() => {
this.setState({
count: this.state.count + 1
})
console.log('count ',this.state.count)
})
}
onAdd = () =>{
////////////////////////////////// 默认是异步的
// this.setState({
// count: this.state.count + 1
// },()=>{
// //转台修改后的回调,类似vue $nextTick
// console.log('count1 ',this.state.count)
// })
// console.log('count0 ',this.state.count)
////////////////////////////////// setTimeout 的 setState 同步的,不会合并
// setTimeout(()=>{
// this.setState({
// count: this.state.count + 1
// })
// this.setState({
// count: this.state.count + 1
// })
// console.log('count ',this.state.count)
// },0)
//对象会全部合并
// this.setState({
// count: this.state.count + 1
// })
// this.setState({
// count: this.state.count + 1
// })
// this.setState({
// count: this.state.count + 1
// })
// console.log('count ',this.state.count)
// //函数不会合并
// this.setState((preState,props)=>{
// return {
// count: preState.count + 1
// }
// })
// this.setState((preState,props)=>{
// return {
// count: preState.count + 1
// }
// })
// this.setState((preState,props)=>{
// return {
// count: preState.count + 1
// }
// })
// console.log('count ',this.state.count)
}
}
export default Basics05