[react]レンダリング効果

レンダーエンティティ(element rendering)

はんのうげんそ

画面に表示する内容を説明するオブジェクト
反応アプリケーションの最小単位

const element = <h1 className="greeting">Hello, world</h1>

React.createElement()では、エラーのないコードを作成するためのチェックが実行されます.デフォルトでは、次のオブジェクトが生成されます.

const element = React.createElement(
  'h1',
  {className: 'greeting'},
  'Hello, world!'
);

react elimmentは不変の객체である.

// console.log(element)
{
  "type": "h1",
  "key": null,
  "ref": null,
  "props": {
    "className": "greeting",
    "children": "Hello, world!"
  },
  "_owner": null,
  "_store": {}
}

レンダーエンティティ

render関数は、コンポーネントの情報によって画面を整理します.
(ブラウザDOMエンティティとは異なる)Reactエンティティは通常オブジェクト(通常オブジェクト)
簡単に作成できます.
REACT DOMは、REACTエイリアスに一致するようにDOMを更新します.

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

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

ルートDOMノード

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

REACT DOMは、その中のすべてのエンティティを管理します.
これを「ルート(root)」DOMノードと呼ぶ.
通常、reactによって実装されるアプリケーションにはDOMノードが1つしかありません.
reactを既存のアプリケーションに統合する場合は、任意の数の独立したルートDOMノードがある可能性があります.

ReactDOM

reactセグメントをルートDOMノードにレンダリングするには、reactDOMも使用します.render()に送信すればいいです.

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

CodePenで実行
上のコードを実行すると、画面に「Hello,world」が表示されます.
この中のすべての要素はREACT DOMによって管理されています.
reactセグメントをルートDOMノードにレンダリングするには、reactDOMも使用します.render()で伝えればいいです.

レンダーエンティティを更新する唯一の方法

(これまでご紹介した内容より)
新しいエンティティを作成し、ReactDOMに変換します.render()で渡す.
Reactエイリアスは不変のオブジェクトです.
エンティティを作成した後、そのエンティティのサブアイテムまたは属性は変更できません.
ムービーでは、エンティティはフレームのような特定の時点のUIを表示します.
ぼろぼろの時計を見てみましょう.

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

CodePenで実行
上記の関数はsetInterval()コールバックを使用して、reactDOMを毎秒1回実行します.render()を呼び出します.

変更された部分のみ更新

REACT DOMは、必要に応じてのみDOMを更新し、そのサブアイテムを以前のエンティティと比較する.
開発者ツール最後の例を使用すると、この点がわかります.

毎秒1つのエンティティが作成され、UI全体を再描画します.
REACT DOMは、内容が変更されたテキストノードのみを更新しています.
経験的に見ると、このようなUIがある時点でどのように表示されるかを考慮する方法は、UIが時間の変化に伴って変化することを考慮する方法よりも多くの誤りを解消することができる.
ソース