レンダリングの基本

レンダリング入門
レンダリングは、ルートで始まるコンポーネントツリーを逆方向に移動させ、更新のためにフラグを付けられたすべてのコンポーネントを探して、プロップと状態の現在の組み合わせに基づいて、希望のUI構造を記述するように頼むプロセスです.それぞれのフラグ付きコンポーネントに対して、Reaction ()はRender ()メソッド( FunctionComponent )または関数Component () ( function component )を呼び出し、JSX結果をプレーンJSオブジェクトに変換した後に生成された出力を保存します.createElement ()も参照ください.
コンポーネントツリー全体からRender出力を収集した後、Replyは、現在のDOMツリーで新しいツリー(仮想DOM)をdiffし、DOMに対して必要なUI構造を生成するために必要な変更のリストを収集します.和解として知られているこのプロセスの後、反応は、DOMにすべての計算された変更を適用します.
レンダリングとコミット
概念的には、この作業は2つの段階に分かれている.

Render phase: rendering components, calculating changes
Commit phase: applying the changes to the DOM

コミットフェーズが完了した後に、ResponentDidmountとComponentDidupdate LifeCycleメソッドを実行します.
以下の2つのキーの取っ手は次のとおりです.

Rendering is not the same as updating the DOM
A component may be rendered without any visible changes

レンダリング理由
最初のレンダリングが完了した後、再レンダリングを引き起こすいくつかの異なるものがあります.

this.setState() (class components)
this.forceUpdate() (class components)
useState() setters (function components)
useReducer() dispatches (function components)
ReactDOM.render() again (on the root component)

レンダリング動作
Responseの既定の動作は、親コンポーネントがレンダリングされたときにすべての子要素を再帰的にレンダリングすることです.これは、コンポーネントの小道具が変更された場合、親コンポーネントがレンダリングされている限り、子プロセスが無条件にレンダリングされないように気にしないことを意味します.
これを別の方法で設定するには、setStand ()をルートコンポーネントに他の変更なしで呼び出すと、コンポーネントツリー内のすべてのコンポーネントを再描画するように反応します.ほとんどの場合、コンポーネントのほとんどは、最後のレンダリングとまったく同じレンダリング出力を返します.つまり、DOWNはDOMへの変更を行う必要はありませんが、レンダリングと拡散計算は時間と労力をかけずに実行されます.