ReactのComponent更新の流れ

ReactのComponentが更新開始してから終わるまでの流れ

2つのフェーズ

https://gyazo.com/848f86c3f182d1eea264342b6a60889a https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/

差分検出処理など内部でゴニョゴニョする

新しい仮想DOMを適用して表示

参考

https://techblog.constantcontact.com/wp-content/uploads/2014/11/TechTalk_BAnderson_11052014_Image7.png

レンダリングするタイミングは、マウント時、再レンダリング時の二箇所

マウント時

フルにDOMを生成し、親要素にマウントする

Mounting

再レンダリング時

差分を計測し、再レンダリングの必要があるものに対して最小限の更新を行う

Updatating

参考