React公式ドキュメントを読む7 React要素のレンダリング

前回からの続きです。

どんな内容をレンダリングするのか

以下のソースコードは、JSXで書かれています。

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

JSXで書かれていると、JavaScriptで書かれているよりも最終的にレンダリングされる内容が分かりやすいかもしれません。

上記例では、レンダリングさせたいものとして「Hello, world」というテキスト内容のh1要素を指定しています。

指定された内容は、ReactによってDOMに変換されてから画面にレンダリングされます。

画面内のどこにレンダリングするのか

画面内のどこにレンダリングするのかは、HTMLファイル内の要素につけられたid名などによって特定します。例えば、以下のようにid名を付けられた要素があれば、id名によってウェブページ内の箇所を特定できます。

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

こうした特定箇所のことをルートノードと呼びます。ルートノードは元になる結節点といった意味ですが、ReactではルートノードのなかのすべてをReact DOMで管理します。ルートノードの下に子ノードを展開させて様々な内容をレンダリングさせられます。

“何を” “どこに” レンダリングするのか

React要素をレンダリングする際には、“何を” “どこに” レンダリングするのかという２つの情報が必要になります。 “何を” に当たるのがReact要素の内容を指定する情報、 “どこに” に当たるのが HTMLファイル内の箇所を特定する情報です。

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

“何を” “どこに” レンダリングするのかという２つの情報を ReactDOM.render() に渡すことで、React要素がDOMに変換されて画面にレンダリングされます。

React要素は後から部分的に変更できない

一度レンダリングされたReact要素は、後から部分的に変更することはできません。すでにレンダリングされている内容を変更するには、新しいReact要素を作成してあらためてレンダリングし直す必要があります。

以下のコードは、1秒ごとにtick()関数が呼び出されています。毎秒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);

上記のサンプルを、CDNで動かしてみましょう。

<!DOCTYPE html>
<html>
<head>
  <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
  <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
  <div id="root"></div>
  <script type="text/babel">
    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);
  </script>
</body>
</html>

上記のサンプルソースをHTMLファイルにしたものが以下です。

https://programming-world.net/sample/react_rendering.html