React-setState深入的使用

setState深入的使用

1. 不可变值【不能改变源数据,如 push pop splice等】
2. setState是同步还是异步

setState无所谓异步还是同步
看是否能命中batchUpdate机制
判断isBatchingUpdates

3.React<=17

可能是异步更新【自定义事件 ，setTimeout...】
可能会被合并

4.React18

Automatic Batching 自动批处理。全部改为 异步更新+ 合并state

5. 总结

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