setState是同步還是異步

一、使用setState現象

1.不可變值

class StateDemo extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            count: 0
        }
    }
    render() {
        return <div>
            <p>{this.state.count}</p>
            <button onClick={this.increase}>累加</button>
        </div>
    }
    increase = () => {
        // //------------ 第一，不要直接修改 state ，使用不可變值 ----------------------------
        // this.state.count++ // 錯誤
        this.setState({
            count: this.state.count + 1 // SCU
        })
        // 操作數組、對象的的常用形式
       // // 不可變值（函數式編程，純函數） - 數組
// const list5Copy = this.state.list5.slice()
// list5Copy.splice(2, 0, 'a') // 中間插入/刪除
// this.setState({
//     list1: this.state.list1.concat(100), // 追加
//     list2: [...this.state.list2, 100], // 追加
//     list3: this.state.list3.slice(0, 3), // 截取
//     list4: this.state.list4.filter(item => item > 100), // 篩選
//     list5: list5Copy // 其他操作
// })
// // 注意，不能直接對 this.state.list 進行 push pop splice 等，這樣違反不可變值

// // 不可變值 - 對象
// this.setState({
//     obj1: Object.assign({}, this.state.obj1, {a: 100}),
//     obj2: {...this.state.obj2, a: 100}
// })
// // 注意，不能直接對 this.state.obj 進行屬性設置，這樣違反不可變值
    }
}

export default StateDemo

2.可能是異步

        //------------第二，setState 可能是異步更新（有可能是同步更新） ----------------------------

        // 1. 直接使用是異步的
        this.setState({
            count: this.state.count + 1
        }, () => {
            console.log('count by callback', this.state.count) // 回調函數中可以拿到最新的 state
        })
        console.log('count', this.state.count) // 異步的，拿不到最新值

        // 2. setTimeout 中 setState 是同步的
        setTimeout(() => {
            this.setState({
                count: this.state.count + 1
            })
            console.log('count in setTimeout', this.state.count)
        }, 0)

// 3. 自己定義的 DOM 事件，setState 是同步的。在 componentDidMount 中
 bodyClickHandler = () => {
        this.setState({
            count: this.state.count + 1
        })
        console.log('count in body event', this.state.count)
    }
    componentDidMount() {
        // 自己定義的 DOM 事件，setState 是同步的
        document.body.addEventListener('click', this.bodyClickHandler)
    }
    componentWillUnmount() {
        // 及時銷毀自定義 DOM 事件
        document.body.removeEventListener('click', this.bodyClickHandler)
        // clearTimeout
    }

3.可能會合並

// -------------第三，state 異步更新的話，更新前會被合並 ----------------------------
        
        // 傳入對象，會被合並（類似 Object.assign ）。執行結果只一次 +1
        this.setState({
            count: this.state.count + 1
        })
        this.setState({
            count: this.state.count + 1
        })
        this.setState({
            count: this.state.count + 1
        })

 // 傳入函數，不會被合並。執行結果是 +3
        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
            }
        })

二、完整的案例

class ListDemo extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            count: 0
        }
    }
    render() {
        return <p>{this.state.count}</p>
    }
    componentDidMount() {
        // count 初始值為 0
        this.setState({ count: this.state.count + 1 },()=>{  //直接使用是異步的
            console.log('555',this.state.count) //1
        })
        console.log('111', this.state.count) // 0
        this.setState({ count: this.state.count + 1 },()=>{
            console.log('666',this.state.count) //1
        })
        console.log('222', this.state.count) // 0
        setTimeout(() => { //setTimeout 中 setState 是同步的
            console.log('777',this.state.count) //1
            this.setState({ count: this.state.count + 1 })
            console.log('888', this.state.count) // 2
        })
        console.log('333')
        setTimeout(() => {  //setTimeout 中 setState 是同步的
            console.log('999', this.state.count) // 2
            this.setState({ count: this.state.count + 1 })
            console.log('1010', this.state.count) // 3
        })
        console.log('444')
    }
}

export default ListDemo

三、為什么呢？-->React的batchUpdate機制

　　　　   setState主流程

                 batchUpdate機制

                 transaction事務機制