【React】マウントとレンダリングとその違い

自分の中でマウントとレンダリングの違いがごちゃごちゃになったので、調べ直してみました。

マウントとは

Reactコンポーネントに対応するインスタンスとDOMノードの作成と、それをDOMツリー（DOMコンテナ）への追加を行う処理。簡単にいえば、該当のReactコンポーネントを画面に表示するために最初に行われる処理のこと。

ちなみに、こちらの図の「Mounting」の部分でも分かるように、マウントは１つの処理を指しているのではない。ブラウザの画面上に最初にReactコンポーネントが表示されるための一連の処理をまとめてマウントという。

DOM(Document Object Model)とは
WebブラウザがWebページを読み込む際に、HTML構造をオブジェクトのツリー構造にしたもの。各要素はDOMノードと呼ばれ、DOMノードを組み合わせてDOMツリーと呼ばれるツリー構造が作られている。

アンマウントとは
DOMツリーからDOMノードを削除すること。

ReactコンポーネントからDOMノードを作成するための情報（StateやPropsの値含む）の読み込みを行うこと。

この図では、renderがMountingとUpdatingに存在するのが分かる。

また、先程の図も分かるように、ReactコンポーネントをDOMに出力するまでを、レンダーフェーズとコミットフェーズに分けて考えられることが多い。

再レンダリング・再レンダーとは
マウント済みのコンポーネントにおいて行われるレンダリングのこと。

マウントは、最初にReactコンポーネントがDOMに出力されるときに行われる一連の処理。

レンダリングは、ReactコンポーネントをDOMに出力するために様々な情報が読み込まれること。

マウント処理の中にレンダリングは含まれるが、レンダリングはマウント時のみ動くわけではなく、アップデートされる際にも動く。