render
render
は、ブラウザの DOM ノードに JSX(“React ノード”)をレンダーします。
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 で完全に構築されたアプリでは通常、“ルート” コンポーネントをレンダーするためにスタートアップ時にこれを一度だけ行います。
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
を呼び出すことができます。
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 が破壊されていないということです。
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 の更新を行います。