04. Rendering Elements - accgetter/React GitHub Wiki

このelementは、Reactアプリケーションでは最小単位のブロックです。

elementは、画面上で表示したいものを記述します:

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

ブラウザのDOM Elementsとは異なり、React Elementsは単純なオブジェクトであり、
作成は簡単です。 React DOMはReactのElementと一致するようにHTMLのDOMを更新します。

注:

Elementsを、より広く知られている「コンポーネント」の概念と混同する可能性があります。next sectionでコンポーネントを紹介します。Elementsとは、コンポーネントの中身ということです。先に進む前にこのセクションを読むことをお勧めします。

DOMへのElementsのレンダリング

HTMLファイルのどこかに <div>があるとします:

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

これをReact DOMで管理するため、これを「ルート」DOMノードと呼びます。

Reactだけで構築されたアプリケーションは、通常、
単一のルートDOMノードを持ちます。既存のアプリにReactを統合する場合、
好きなだけ多くの独立したルートDOMノードを持つことができます。

React ElementをルートDOMノードにレンダリングするには、
ルートDOMの情報とelement両方をReactDOM.render()に渡します:

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

Try it on CodePen.

このページには「Hello, world」と表示されます。

レンダリングされたElementsの更新

React Elementsはimmutableです。
Elementsを作成したら、その子や属性を変更することはできません。
Elementsはムービーの1つのフレームのようなものです。ある時点のUIを表します。

これまでの知識では、UIを更新する唯一の方法は、
新しいElementsを作成し、それを 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.

これは、setInterval()コールバックから
毎秒ReactDOM.render()を呼び出します。

注:

実際には、ほとんどのReactアプリケーションは ReactDOM.render()を一度しか呼び出しません。次のセクションでは、そのようなコードがどのようにstateful componentsにカプセル化されるのかを学んでいきます。

トピックはスキップすることはお勧めしません。

必要なものだけを更新する

React DOMは、Elementsとその子Elementsを前のElementsと比較し、
DOMをあるべき姿ににするために必要なDOMの更新のみを適用します。

ブラウザーツールでlast exampleを調べることで確認できます。

DOM inspector showing granular updates

毎秒UIツリー全体を記述するElementsを作成しても、
内容が変更されたテキストノードだけがReact DOMによって更新されます。

私たちの経験では、時間をかけてUIを変更する方法よりも、
UIのあるべき姿を考えてみると、全体的にクラスのバグを取り除くことができます。

⚠️ **GitHub.com Fallback** ⚠️