[解決済み] React jsの「Mounting」とは何ですか？

質問

ReactJSを学習していると、マウントという言葉を何度も耳にするようになりました。そして、この言葉に関するライフサイクルメソッドやエラーがあるようです。Reactのマウントとは具体的に何を意味しているのでしょうか？

例 componentDidMount() and componentWillMount()

どのように解決するのですか？

Reactの主な仕事は、コンポーネントが画面上にレンダリングされたいものに合わせてDOMを修正する方法を見つけ出すことです。

React は、ノードのマウント（DOM への追加）、アンマウント（DOM からの削除）、アップデート（DOM 内のノードへの変更）により、これを行います。

ReactのノードがDOMノードとしてどのように表現され、DOMツリーのどこにいつ表示されるかは トップレベルAPI . 何が起こっているのかをよりよく理解するために、最もシンプルな例を見てみましょう。

// JSX version: let foo = <FooComponent />;
let foo = React.createElement(FooComponent);

では、何が foo で、何ができるのでしょうか？ foo というのは、今のところ、JavaScriptのオブジェクトで、だいたいこんな感じです（簡略化）。

{
  type: FooComponent,
  props: {}
}

つまり、DOM 要素ではなく、DOM ツリーのどこにも存在せず、React 要素のノードであることを除けば、ドキュメント内で他に意味のある表現がありません。 これは、Reactに何を伝えるかだけです。 必要なもの が画面に表示されるようにします。 もし この React 要素がレンダリングされる。 まだ実装されていません。

を呼び出すことで、React に DOM コンテナに "mount" するように指示することができます。

ReactDOM.render(foo, domContainer);

これはReactに、そろそろ foo をページ上に表示します。React は FooComponent クラスを作成し、その render メソッドを使用します。をレンダリングするとします。 <div /> この場合、Reactは div DOM ノードを作成し、DOM コンテナに挿入します。

このように、Reactコンポーネントに対応するインスタンスとDOMノードを作成し、DOMに挿入する作業をマウントと呼びます。

なお、通常は ReactDOM.render() を使用して、ルートコンポーネントをマウントします。子コンポーネントを手動で mount" する必要はありません。親コンポーネントが setState() と、その render メソッドで特定の子を初めてレンダリングするように指示すると、React は自動的にその子を親に "マウント" します。