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')
);
このページには「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);
これは、setInterval()
コールバックから
毎秒ReactDOM.render()
を呼び出します。
注:
実際には、ほとんどのReactアプリケーションは
ReactDOM.render()
を一度しか呼び出しません。次のセクションでは、そのようなコードがどのようにstateful componentsにカプセル化されるのかを学んでいきます。トピックはスキップすることはお勧めしません。
React DOMは、Elementsとその子Elementsを前のElementsと比較し、
DOMをあるべき姿ににするために必要なDOMの更新のみを適用します。
ブラウザーツールでlast exampleを調べることで確認できます。
毎秒UIツリー全体を記述するElementsを作成しても、
内容が変更されたテキストノードだけがReact DOMによって更新されます。
私たちの経験では、時間をかけてUIを変更する方法よりも、
UIのあるべき姿を考えてみると、全体的にクラスのバグを取り除くことができます。