React jsの「マウント」とは何ですか？

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に伝えるだけです。まだ「マウント」されていません。

以下を呼び出すことで、それをDOMコンテナーに「マウント」するようReactに指示できます。

ReactDOM.render(foo, domContainer);

これはfoo、ページに表示する時間であることをReactに伝えます。ReactはFooComponentクラスのインスタンスを作成し、そのrenderメソッドを呼び出します。それがをレンダリングするとしましょう。<div />その場合、ReactはdivDOMノードを作成し、それをDOMコンテナーに挿入します。

Reactコンポーネントに対応するインスタンスとDOMノードを作成し、それらをDOMに挿入するこのプロセスは、マウントと呼ばれます。

通常はReactDOM.render()、ルートコンポーネントをマウントするように呼び出すだけであることに注意してください。子コンポーネントを手動で「マウント」する必要はありません。親コンポーネントがを呼び出しsetState()、そのrenderメソッドが特定の子を初めてレンダリングする必要があると言うたびに、Reactはこの子を自動的に親に「マウント」します。

Reactは同形/普遍的なフレームワークです。これは、UIコンポーネントツリーの仮想表現があり、ブラウザで出力される実際のレンダリングとは別であることを意味します。ドキュメントから：

ReactはDOMと直接通信することがないため、非常に高速です。Reactは、DOMの高速なメモリー内表現を維持します。

ただし、そのインメモリ表現はブラウザーのDOMに直接関連付けられていません（たとえそれが仮想DOMと呼ばれていても、ユニバーサルアプリフレームワークでは残念で紛らわしい名前です）、それはDOMのようなデータです-すべてのUIコンポーネント階層と追加のメタデータを表す構造。仮想DOMは単なる実装の詳細です。

「私たちは、Reactの真の基礎は、コンポーネントと要素のアイデアにすぎないと考えています。レンダリングしたいものを宣言的な方法で説明できることです。これらは、これらすべての異なるパッケージで共有される部分です。特定のレンダリングに固有のReactの部分ターゲットは通常、Reactについて考えるときに私たちが考えるものではありません。」-React js Blog

したがって、結論は、Reactはレンダリングにとらわれないということです。つまり、最終出力が何であるかを気にしません。ブラウザのDOMツリーでも、XML、ネイティブコンポーネント、JSONでもかまいません。

「react-native、react-art、react-canvas、react-threeなどのパッケージを見ると、Reactの美しさと本質はブラウザーやDOMとは何の関係もないことが明らかになりました。」-React js Blog

これで、Reactの仕組みがわかったので、質問に簡単に答えることができます。

マウントは、コンポーネントの仮想表現を最終的なUI表現（DOMまたはネイティブコンポーネントなど）に出力するプロセスです。

DOMツリーの実際のDOM要素（HTML divまたはli要素など）にReact要素を出力することを意味するブラウザー。ネイティブアプリケーションでは、React要素をネイティブコンポーネントに出力することを意味します。勇気があれば、独自のレンダラーを記述して、ReactコンポーネントをJSONまたはXML、さらにはXAMLに出力することもできます。

したがって、コンポーネントがマウントされたときにのみコンポーネントが出力/レンダリングされることを確認できるので、ハンドラーのマウント/アンマウントはReactアプリケーションにとって重要です。ただし、componentDidMountハンドラーは、実際のUI表現（DOMまたはネイティブコンポーネント）にレンダリングする場合にのみ呼び出されますがrenderToString、を使用してサーバー上のHTML文字列にレンダリングする場合は呼び出されません。これは、コンポーネントが実際にマウントされるまで実際にマウントされないためです。ブラウザで実行します。

そして、はい、あなたが私に尋ねるなら、マウンティングは不幸な/紛らわしい名前でもあります。私見componentDidRenderとcomponentWillRenderはるかに良い名前になります。

マウントとは、React内のコンポーネント（作成されたDOMノード）がドキュメントの一部に添付されることを指します。それでおしまい！

Reactを無視すると、これらの2つのネイティブ関数をマウントと考えることができます。

replaceChild

appendChild

Reactが内部マウントに使用する最も一般的な機能はどれでしょうか。

のことを考える：

componentWillMount ===マウント前

そして：

componentDidMount ===アフターマウント

https://facebook.github.io/react/docs/tutorial.html

ここで、componentDidMountは、コンポーネントがレンダリングされるときにReactによって自動的に呼び出されるメソッドです。

コンセプトは、ReactJSに「このこと、このコメントボックスまたは回転する画像など、ブラウザページに必要なものをすべて取り込んで、実際にブラウザページに配置してください。それが終わったら、私がバインドした私の機能 componentDidMount進むことができるように。」

componentWillMount反対です。コンポーネントがレンダリングされる直前に実行されます。

こちらもご覧ください くださいhttps://facebook.github.io/react/docs/component-specs.html

最後に、「マウント」という用語は、react.jsに固有のようです。私はそれが一般的なJavaScriptの概念、あるいは一般的なブラウザの概念でさえないと思います。

マウントとは、Reactコンポーネントが最初にレンダリングされるときの最初のページの読み込みを指します。マウントのReactドキュメントから：componentDidMount：

Invoked once, only on the client (not on the server), immediately after the initial rendering occurs. At this point in the lifecycle, the component has a DOM representation which you can access via React.findDOMNode(this).

これは、Reactがレンダリングするたびに呼び出される（初期マウントを除く）componentDidUpdate関数と対照的です。

React jsの主な目的は、再利用可能なコンポーネントを作成することです。ここで、コンポーネントはWebページの個々の部分です。たとえば、ウェブページでは、ヘッダーはコンポーネント、フッターはコンポーネント、トースト通知はコンポーネントなどです。「マウント」という用語は、これらのコンポーネントがDOMにロードまたはレンダリングされることを示しています。これらは、これを処理する多くのトップレベルのAPIとメソッドです。

簡単に言うと、マウントとはコンポーネントがDOMにロードされたことを意味し、アンマウントとはコンポーネントがDOMから削除されたことを意味します。