レンダー

Deprecated

この API は、今後のメジャーバージョンの React で削除される予定です。

React 18 では、render は createRoot に置き換えられました。React 18 で render を使用すると、アプリは React 17 を実行しているかのような振る舞いになるとの警告が表示されます。詳細はこちらをご覧ください。

render は、ブラウザの DOM ノードに JSX（“React ノード”）をレンダーします。

render(reactNode, domNode, callback?)

リファレンス
- render(reactNode, domNode, callback?)
使用法

リファレンス

`render(reactNode, domNode, callback?)`

render を呼び出して、ブラウザの DOM 要素に React コンポーネントを表示します。

import { render } from 'react-dom';

const domNode = document.getElementById('root');
render(<App />, domNode);

React は domNode 内に <App /> を表示し、その内部の DOM の管理を行います。

React で完全に構築されたアプリには、ルートコンポーネントを引数にした render 呼び出しが通常 1 つのみ存在します。ページ内に React を「散りばめて」使用するページの場合は、必要なだけ render を呼び出すことができます。

さらに例を見る

引数

reactNode: 表示したい React ノード。通常は <App /> のような JSX ですが、createElement() で構築した React 要素や、文字列、数値、null、または undefined を渡すこともできます。
domNode: DOM 要素。React は、渡された reactNode をこの DOM 要素内に表示します。この瞬間から、React は domNode 内の DOM を管理し、React ツリーが変更されたときにそれを更新するようになります。
省略可能 callback: 関数。渡された場合、React はコンポーネントが DOM に配置された後にそれを呼び出します。

返り値

render は通常 null を返します。ただし、渡す reactNode がクラスコンポーネントの場合、そのコンポーネントのインスタンスを返します。

注意点

React 18 では、render は createRoot に置き換えられました。React 18 以降では createRoot を使用してください。
render を初めて呼び出したとき、React は React ルート内の既存の HTML コンテンツをすべてクリアしてから、React コンポーネントをレンダーします。domNode がサーバ上であるいはビルド中に React によって生成された HTML を含んでいる場合は、代わりに既存の HTML にイベントハンドラをアタッチできる hydrate() を使用してください。
同じ domNode に対して render を複数回呼び出すと、React は最新の JSX を反映するために必要なだけの DOM の更新を行います。React は、渡された JSX を以前にレンダーしたツリーと「マッチング」して、DOM のどの部分が再利用でき、どの部分を再作成する必要があるのかを決定します。同じ domNode に対して複数回 render を呼び出すことは、ルートコンポーネントで set 関数を呼び出すことに似ており、React は不必要な DOM 更新を回避します。
アプリが完全に React で構築されている場合、アプリ内で render を呼び出すのは通常 1 回だけです。（フレームワークを使用している場合、この呼び出しはフレームワークが行うかもしれません。）DOM ツリー内の、コンポーネントの子ではない別の部分に JSX をレンダーしたい場合（例えばモーダルやツールチップ）、createRoot の代わりに createPortal を使用してください。

使用法

render を呼び出して、React コンポーネントをブラウザの DOM ノード内に表示します。

import { render } from 'react-dom';
import App from './App.js';

render(<App />, document.getElementById('root'));

ルートコンポーネントのレンダー

React で完全に構築されたアプリでは通常、“ルート” コンポーネントをレンダーするためにスタートアップ時にこれを一度だけ行います。

Fork

import './styles.css';
import { render } from 'react-dom';
import App from './App.js';

render(<App />, document.getElementById('root'));

通常、render を再度呼び出したり複数の場所で呼び出したりする必要はありません。この時点から、React はアプリケーションの DOM を管理します。UI を更新するには、コンポーネントが state を使用します。

複数のルートのレンダー

ページが完全には React で構築されていない場合、React に管理させたいトップレベルの UI パーツに対してそれぞれ render を呼び出すことができます。

Fork

import './styles.css';
import { render } from 'react-dom';
import { Comments, Navigation } from './Components.js';

render(
  <Navigation />,
  document.getElementById('navigation')
);

render(
  <Comments />,
  document.getElementById('comments')
);

レンダーされたツリーは unmountComponentAtNode() で破棄することができます。

レンダーされたツリーの更新

同じ DOM ノードに対して render を複数回呼び出すことができます。コンポーネントツリーの構造が以前にレンダーされたものと一致していれば、React は state を保持します。以下の例で入力フィールドにタイプできることに着目してください。つまり毎秒 render が繰り返し呼び出されていますが、更新により DOM が破壊されていないということです。

Fork

import { render } from 'react-dom';
import './styles.css';
import App from './App.js';

let i = 0;
setInterval(() => {
  render(
    <App counter={i} />,
    document.getElementById('root')
  );
  i++;
}, 1000);

render を複数回呼び出すことは滅多にありません。通常、代わりにコンポーネントで state の更新を行います。

Previoushydrate NextunmountComponentAtNode