React 要素のレンダリング

React 18 では、要素のレンダリングは以前のバージョンと比べていくつかの変更があります。特に使用ReactDOM.createRootおよび新しい並行処理機能の面で。以下に、React 18 で要素をレンダリングする方法の詳細な例と説明を示します。

例

import React from 'react';
import ReactDOM from 'react-dom/client';

// シンプルな React コンポーネントを作成する
function App() {
    return <h1>Hello, React 18!</h1>;
}

// id が "example" の DOM コンテナを取得し、React ルートノードを作成する
const root = ReactDOM.createRoot(document.getElementById("example"));

// React コンポーネントを DOM 内のルートノードにレンダリングする
root.render(<App />);

React 要素は、React アプリを構築する最小の単位であり、画面に表示したい内容を記述します。React 要素は不変オブジェクトであり、一度作成すると変更できません。

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

ブラウザの DOM 要素とは異なり、React の要素は実際には普通のオブジェクトです。React DOM は、ブラウザの DOM のデータ内容が React 要素と一致するように保証します。

要素を DOM にレンダリングする

まず、HTML ページにid="example"の<div>:

<div id="example"></div>

この div 内のすべてのコンテンツは React DOM によって管理されるため、これを「ルート」DOM ノードと呼びます。

React でアプリを開発するときは、通常はルートノードを 1 つだけ定義します。ただし、既存のプロジェクトに React を導入する場合は、異なる部分ごとに React ルートノードを個別に定義する必要があるかもしれません。

React 要素をルート DOM ノードにレンダリングするには、それらをすべてroot.render()に渡すことでページにレンダリングします：

例

//React 要素を作成する const element =<h1>Hello, world!</h1>; //DOM コンテナを取得してルートノードを作成する const root = ReactDOM.createRoot(document.getElementById("example")); //React 要素を DOM 内のルートノードにレンダリングする root.render(element);

試してみる »

root.renderこのメソッドは、element を先ほど作成したルートノードにレンダリングします。これにより、element は id が "example" の DOM 要素内に表示されます。

要素のレンダリングを更新する

React 要素はすべて不変です。要素が作成された後は、その内容や属性を変更することはできません。

現在、UI を更新する唯一の方法は、新しい要素を作成し、それを ReactDOM.render() メソッドに渡すことです：

このタイマーの例を見てみましょう：

例

const root = ReactDOM.createRoot(document.getElementById("example")); function tick() { const element = ( <div> <h1>Hello, world!</h1> <h2>現在は{new Date().toLocaleTimeString()}.</h2> </div> ); root.render(element); } setInterval(tick, 1000);

試してみる »

上記の例では、setInterval() メソッドを使用して、毎秒 ReactDOM.render() を呼び出します。

表示したい部分をカプセル化できます。次の例では、関数を使って表しています：

例

function Clock(props) { return ( <div> <h1>Hello, world!</h1> <h2>現在は{props.date.toLocaleTimeString()}.</h2> </div> ); } function tick() { const root = ReactDOM.createRoot(document.getElementById("example")); root.render( <Clock date={new Date()} /> ); } setInterval(tick, 1);

試してみる »

関数の他に、表示する要素をカプセル化した React.Component の ES6 クラスを作成することもできます。注意すべき点は、render() メソッド内では、this.props置き換える必要があります。props：

例

class Clock extends React.Component { render() { return ( <div> <h1>Hello, world!</h1> <h2>現在は{this.props.date.toLocaleTimeString()}.</h2> </div> ); } } function tick() { const root = ReactDOM.createRoot(document.getElementById("example")); root.render( <Clock date={new Date()} /> ); } setInterval(tick, 1);

試してみる »

React は必要な部分のみ更新します

注目すべき点は、React DOM はまず要素の内容の前後を比較し、レンダリングの過程で変更された部分のみを更新するということです。

その他の拡張