[キーコンセプト]レンダリング要素

ElementsはReactアプリケーションの最小単位です.
Elementはあなたがスクリーンで見たいものを説明しました.

const element = <h1>Hello, world</h1>;

Browser DOM要素とは異なり、React要素は基本(純)オブジェクトであり、作成しやすい.REACT DOMはREACT要素に基づいてDOMを更新する.
Note:
要素と「components」の概念が混同される可能性があります.componentsは次の節で紹介します.Elementsはcomponentsの「何からなるか」で、次の部分に入る前にこの部分を見てみましょう.

DOMへのElementのレンダリング

HTMLファイルに<div>があるとします.

<div id="root"></div>

この中のすべてのものはReact DOMが管理しているので、「root」DOM nodeと呼ばれています.
Reactが作成したアプリケーションにはルートDOMノードが1つしかありません.reactを既存のアプリケーションに統合する場合は、任意の数の独立したルートDOMノードがあります.
react要素をルートDOM nodeにレンダリングするには、両方の要素をReactDOM.render()に渡す必要があります.

const element = <h1>Hello, world</h1>;
ReactDOM.render(element, document.getElementById('root'));

Try it on CodePen
これは「Hello,world」ページです.

レンダリングされた要素を更新

Reactの要素は변경할 수 없다です.エレメントが作成されると、サブアイテムやプロパティは変更できません.elementは映画の中でフレームワークのようなものです.elementは特定の時点のUIを記述しています.
現在の情報によれば、UIを更新する方法は、新しい要素を生成してReactDOM.render()に渡すしかない.
リアルタイムクロックの例を見てみましょう.

function tick() {
  const element = (
    <div>
      <h1>Hello, world!</h1>
      <h2>It is {new Date().toLocaleTimeString()}.</h2>
    </div>
  );
  ReactDOM.render(element, document.getElementById('root'));
}

setInterval(tick, 1000);

Try it on CodePen
1秒あたりsetInterval()からReactDOM.render()がコールバックされます.
NOTE:
実際、reactアプリケーションの大部分はReactDOM.render()万しか呼び出されていません.次のセクションでは、これらのコードをステータスコンポーネントにカプセル化する方法について説明します.
お互いに連絡があるので、これらのテーマをスキップしないことをお勧めします.

Reactは必要なコンテンツのみを更新します。

REACT DOMは元素とその子元素を以前と比較する.また、DOMは必要に応じて更新され、所望の状態になる.
ブラウザツールを使用して、上記の例を確認できます.
サンプル実行画面
UIツリー全体を1秒ごとに描画する要素が作成されますが、React DOMは変更内容のあるテキストノードのみを更新します.
経験的には、UIの時間的変化を考慮するよりも、UIが状況に応じてどのように変化するかを考慮すると、クラス全体のエラーが解消される可能性があります.