[Get started]から始めるReact開発：その2:Rendering Elements

引き続きReact

[Get started]から始めるReact開発：その1
[Get started]から始めるReact開発：その2:Rendering Elements
[Get started]から始めるReact開発：その3:Components and Props
[Get started]から始めるReact開発：その4(State and Lifecycle①
[Get started]から始めるReact開発：その4(State and Lifecycle②

#Rendering Elements

ElementsはReact appsでの最小のブロックです。
どんなふうに画面上で見ることができるかを表しています。

code

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

ブラウザのDOM要素とは異なり、React Elementは簡素なオブジェクトで、作り事自体は簡単です。
React DomはReact Elementｓと一致するようにDOMの更新を行います。

componentsと混同するかもしれませんが、componentsに関しては次のsectionで紹介しています。一足とびにそちらを学ぶ前にこのセクションを読むことを奨励しているそうです。

##Rendering an Element into the DOM

仮にあなたのHTMLファイルの何処かに<div>タグがあったとします。

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

React DOmで管理をしたいのでこれをrootDOMと呼びます。
Reactで作られたアプリケーションはシングルroot DOMノードを持ちます。もしあなたが既に作られたアプリケーションにReactを採用するのであれば、好きなだけ多くの独立したroot DOMを持つことができます。

root DOMの中にReact Elementsをレンダリングするためには、ReactDOM.render()に両方を渡します。

code

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

CodePenで確認

Hello, worldがページに表示されます。

##Updating the Rendered Element

React Elementは変更ができません(React elements are immutable)。一度要素を作るとその子や属性を変更することはできません。
要素は映画の1フレームのようにある特定の時点でのUIを表します。（…何だこの日本語

これまでの私達の知識では、UIを更新する方法は新しく要素を作り出すことと、ReactDOM.render()にそれをわたすことです。

時計の例で考えてみます。

code

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.render()を呼び出しています。

練習の中で、多くのReact appsは一度だけしかReactDOM.render()をよびだしていません。次のセクションでそれらがどのようにステートフルなコンポーネントにカプセル化されているかを学びます。
それらは相互に関連しておりお互いに基づいて構築されているので、現在のトピックをスキップしないことをおすすめしています。

##React Only Updates What's Necessary(Reactは必要なものだけを更新する)

Reactは要素とその子要素について一つ前の要素と比較します。望みの状態にDOMを持ってくるために必要な更新をDOMに適用します。
最後の例をブラウザの検証ツールで検証することができます。¹

全てのUIツリーの記述を毎秒作り出すとしても、内容が変更されたテキストノードだけがReact DOMによって更新されます。(このあとちょっと訳すのが難しいのでgoogle翻訳)私たちの経験では、時間をかけてUIを変更する方法ではなく、UIをどのように見なければならないか考えてみると、バグ全体が取り除かれます。

1. ここでChromeとかのブラウザ検証ツールを使っているGIF画像が表示されていますが参照しません。 ↩