Reactガイドを読んでいくその118

これは

Reactのガイドを読んでいく記事です。

ガイドのリンク

ja.reactjs.org

意図しない副作用の検出

Reactは2つのフェーズで動作する。

  • レンダーフェーズ 変更対象にどのような変更が必要か決める。
    Reactはrenderを呼び出して前回のレンダー結果と比較をする。

  • コミットフェーズ Reactは変更を反映する。
    componentDidMount や componentDidUpdate などのライフサイクルの呼び出しも行う。

比較したり描画する必要があるレンダーフェーズでは処理が遅くなることがある。
そうするとブラウザに何も表示されないことになってしまう場合があるので、それを避けるために
細分化して処理を軽くするような非同期処理を実行できるようにすることができる。

レンダーフェーズで呼ばれるメソッドは以下
・constructor
・componentWillMount (or UNSAFE_componentWillMount)
・componentWillReceiveProps (or UNSAFE_componentWillReceiveProps)
・componentWillUpdate (or UNSAFE_componentWillUpdate)
・getDerivedStateFromProps
・shouldComponentUpdate
・render
・setState 更新関数(第 1 引数)

これらのメソッドは複数回呼ばれることがあるので、副作用があるような実装にするとうまく動かないことがある。

strictモードを使うと多少この検出が楽になる。
意図的に2回以下のメソッドを呼ぶことで発見の手助けになる。
・クラス型コンポーネントの constructor メソッド
・render メソッド
・setState 更新関数(第 1 引数)
・スタティックなライフサイクル getDerivedStateFromProps

今日はここまで。