エレベーターはreactアプリケーションの最小単位です。

画面に表示される内容を説明します.

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

ブラウザDOMエンティティとは異なり、Reactエンティティは通常のオブジェクトであり、簡単に作成できます.REACT DOMは、REACT ELLIMENTと一致するようにDOMを更新します.

DOMでエンティティをレンダリングする

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

REACT DOMではdivタグ内の全ての領域が管理されているため、ルートDOMノードと呼ばれる.
Reactが実装するアプリケーションには、通常、ルートDOMノードがあります.reactを既存のアプリケーションに統合する場合は、独立したルートDOMノードが任意の数存在する可能性があります.
reactエイリアスをルートDOMノードにレンダリングする場合は、両方ともReactDOM.render()に渡すことができます.

const element = <h1>my name is lalala</h1>;
ReactDOM.render(element, document.getElementById('root'));

//  my name is lalala

レンダリングされたエンティティの更新

React要素は不変のオブジェクトです.エンティティを作成した後、そのエンティティのサブアイテムまたは属性は変更できません.

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);

ほとんどのRealtDOM.render()を1回反転します.

変更のみ更新

REACT DOMは、必要に応じてDOMを更新し、そのサブアイテムを以前の部分と比較する.

毎秒1つのエンティティを作成してUIを再描画するが、RealtDOMはコンテンツが変化するテキストノードのみを更新する.
リファレンス
このポスターは「実戦フィードバック」公式サイトhttps://ko.reactjs.org/で公開される.
REACTチュートリアルhttps://ko.reactjs.org/docs/rendering-elements.htmlを参照して作成します.