React setState() データ同期＆非同期の書き方

データ非同期更新

setState()のデータ更新は非同期です。

同じスコープ内にsetState()を複数回呼び出されたも、render()は一回しか呼ばされないです。

//非同期更新
handleClick = () => {
        this.setState({
            count: this.state.count + 1
        })

        console.log('first', this.state.count)  //1

        this.setState({
            count: this.state.count + 1
        })

        console.log('second', this.state.count)  //1
        
    }

データを同期更新させる方法

setState((state,props)⇒{}) を使用することです。

　・state:　最新のstate

　・props:　最新のprops

handleClick = () => {
        this.setState((state, props) => {
            return {
                count: state.count+1
            }
        })

        this.setState((state, props) => {
            console.log('second',this.state) //2  
            return {
                count: state.count+1
            }
        })

        console.log(this.state.count) //1 これを先にプリントする

    }

setState()の第二引数

setState（updater[,callback]）

UIレンダリング後に、setStateの第二引数callbackを直ちに実行します。

handleClick = () => {
        this.setState(
            //第一引数　updater
            (state, props) => {
            return {
                count: state.count+1
            }
            },
            
             //第二引数　callback
            () => {
            console.log(document.title)
        }
        )
    }

コンポーネント更新の仕組み

setState() の役割は大きく二つに分けられます。

1.　stateの更新

2.　コンポーネントの更新

コンポーネントを更新する際に、子要素のコンポーネントしか更新しません。

兄弟や親のコンポーネントは更新しません。

黄色部分は更新するところ

注意すべきところ

レンダリング必要あるのデータだけ、stateに入れますが、

レンダリング必要ないデータはthisに入れます。

stateのデータが多ければ多いほど、renderの性能が低下してしまいます。