React要素の使い方

React講座　要素のレンダー

by

要素（エレメント）とは React アプリケーションの最小単位の構成ブロックです。

ブラウザのDOM要素と異なり、React要素は単純なオブジェクトになり、簡単に作成されます。React DOMがReactエレメントを把握してそれに従いDOMを更新する作業を担当することになります。

補足:

要素のことを、より広く知られている概念である “コンポーネント” と混同する人もいるかもしれません。コンポーネントについては次の章で説明します。要素とはコンポーネントを “構成する” ものです。次に進む前にこの章を読んでいくことをお勧めします。

要素を DOM としてレンダーする

HTMLファイルの中に<div>要素があったとしましょう。

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

最初の記事で説明したようにindex.htmlにはrootの要素が一つだけありましたね。

ここにReactDOMがすべてのReactのアプリケーションを管理することになるのでルートのDOMノードと呼ぶことにしましょう。

Reactだけで構築されたアプリケーションはDOMノードを一つだけ持ちます。既存のアプリにReactを組み合わせて使いたい場合は独立したDOMノードを複数使用することも可能です。

React 要素をルート DOM ノードにレンダーするには、まず ReactDOM.createRoot() に DOM 要素を渡し、root.render() に React 要素を渡します。

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

このコードにより”Hello World”が表示されます。

レンダーされた要素の更新

react要素はイミュータブルです。※イミューン（Immune：変更できない）

一度作成された要素の子要素や、属性などを変更することはできません。

今の学習段階でUIを更新する方法は新し要素を作成してroot.render()に渡すという事になります。

以下の例で秒刻みに動く時計の例についてみてみます。

const root = ReactDOM.createRoot(
  document.getElementById('root')
);

function tick() {
  const element = (
    <div>
      <h1>Hello, world!</h1>
      <h2>It is {new Date().toLocaleTimeString()}.</h2>
    </div>
  );
  root.render(element);
}

setInterval(tick, 1000);

実際の例を見てください。

この例ではsetInterval() のコールバックから root.render() を毎秒呼び出しています。

補足：

上記のコードは例として記載したものであり、実際にはroot.render()を呼び出すことは１度のみ行う事が通常になります。次の章では、上記のコードをstate付きのコンポーネントへとカプセル化する方法を学びます。飛ばさないようにしましょう。

React は必要な箇所のみを更新する

ReactDomは要素とその子要素を以前のものと比較しています。その比較の際に差があった場合、必要な部分のみのDOMの更新を行うことになります。

下記の例では時間の変わる要素の部分のみ更新されていることが分かりますね。

このように必要な部分だけリアクティブに要素が変わることでユーザーにインタラクティブなインターフェイスを提供することができますね。