目的
関数コンポーネントを使用しており、あまりライフサイクルを意識していなかったので、今一度ライフサイクルを理解しアウトプットする為記事を書いています。
Componentライフサイクル
下記のリンクは、クラスコンポーネントのライフサイクルになります。
現在、コンポーネントをクラスではなく、関数として定義することが推奨されていますが、コンポーネントが生まれて死ぬまでの流れはこれを理解していた方がいいかもです。
ライフサイクルメソッド
関数コンポーネントには、クラスコンポーネントのような明示的なライフサイクルメソッドがなく、関数コンポーネント内で、componentDidMount、componentDidUpdate、componentWillUnmountのようなライフサイクルメソッドを使いたい場合、useEffectフック を使用します。これを副作用 (effect) フックといいます。
※ フックについては、別の記事にまとめます。
副作用とは？
数学的関数は本来計算結果を返すことが目的ですが、その過程で周囲の状態を変化させてしまうことを指します。このような状態の変化はバグに繋がる可能性があるため、副作用という名で呼ばれています。（引用：副作用）
Reactの副作用には、クリーンアップコードを必要としない副作用と、必要とする副作用の2種類があります。
Render and Commit
コンポーネントが画面に表示されるまでに、下記の3つの工程が行われます。
① renderをトリガーする
② コンポーネントをレンダリングする
③ DOMにコミットする
① renderをトリガーする
コンポーネントがレンダリングされるタイミングは下記の時です。
- コンポーネントの初期レンダリング時
- コンポーネント（またはその祖先）の状態の更新時
② コンポーネントをレンダリングする
renderをトリガーした後、Reactはコンポーネントを呼び出し、画面に何を表示するかを決定します。
「レンダリング」とは、Reactがコンポーネントを呼び出すことです。
(引用：Render and Commit)
下記のようなコンポーネントがある時、
export default function Gallery() {
return (
<section>
<h1>Inspiring Sculptures</h1>
<Image />
<Image />
<Image />
</section>
);
}
function Image() {
return (
<img
src="https://i.imgur.com/ZF6s192.jpg"
alt="'Floralis Genérica' by Eduardo Catalano: a gigantic metallic flower sculpture with reflective petals"
/>
);
}
1番最初のレンダリングの場合、<section>、<h1>、<img>の全てのDOMノードを作成します。
2回目以降の再レンダリングの場合、前回のレンダリングから変更されたプロパティがあれば、それを計算します。
※ ここではDOMの変更は行われません。
③ DOMにコミットする
コンポーネントをレンダリング（呼び出し）した後、DOMを変更します。
1番最初のレンダリングの場合、appendChild()DOM APIを使用して、作成したすべての DOM ノードを画面上に配置します。
2回目以降の再レンダリングの場合、 差がある時のみDOM情報を変更します。
③までの工程が終了した後、ブラウザは画面を再描画します。
このプロセスは「ブラウザレンダリング」として知られていますが、ドキュメント全体で混乱を避けるために「ペイント」と呼ぶことにします。(引用)
参考