非推奨

このAPIは将来のメジャーバージョンで削除されます。

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

renderは、ブラウザのDOMノードにJSX（「Reactノード」）の一部をレンダリングします。

render(reactNode, domNode, callback?)

リファレンス

render(reactNode, domNode, callback?)

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

import { render } from 'react-dom';

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

Reactは<App />をdomNodeに表示し、内部のDOMの管理を引き継ぎます。

Reactで完全に構築されたアプリは、通常、ルートコンポーネントでrender呼び出しを1回だけ行います。ページの一部にReactを「少量」使用しているページでは、必要に応じてrender呼び出しを複数行うことができます。

以下の例を参照してください。

パラメータ

  • reactNode：表示するReactノード。通常は<App />のようなJSXの一部ですが、createElement()で構築されたReact要素、文字列、数値、null、またはundefinedを渡すこともできます。

  • domNode: DOM要素です。ReactはこのDOM要素内に渡されたreactNodeを表示します。この時点から、ReactはdomNode内のDOMを管理し、Reactツリーに変更があった際に更新します。

  • オプション callback: 関数です。渡された場合、コンポーネントがDOMに配置された後にReactはこの関数を呼び出します。

戻り値

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

注意事項

  • React 18以降では、renderはcreateRootに置き換えられました。React 18以降はcreateRootを使用してください。

  • 最初にrenderを呼び出すと、Reactコンポーネントをレンダリングする前に、domNode内の既存のHTMLコンテンツをすべてクリアします。domNodeにサーバー側またはビルド時にReactによって生成されたHTMLが含まれている場合は、既存のHTMLにイベントハンドラーをアタッチするhydrate()を使用してください。

  • 同じdomNodeに対してrenderを複数回呼び出すと、Reactは最新のJSXを反映するようにDOMを必要に応じて更新します。Reactは、DOMのどの部分が再利用でき、どの部分が再作成する必要があるかを、以前にレンダリングされたツリーと「照合」することで判断します。同じdomNodeに対してrenderを再度呼び出すことは、ルートコンポーネントのset関数を呼び出すことと似ています。Reactは不要なDOM更新を回避します。

  • アプリケーションが完全にReactで構築されている場合、アプリケーション内のrender呼び出しは1回だけになります。（フレームワークを使用している場合は、フレームワークが代わりにこの呼び出しを行う場合があります。）コンポーネントの子ではないDOMツリーの異なる部分（例：モーダルまたはツールチップ）にJSXをレンダリングする場合は、renderではなくcreatePortalを使用してください。

使用方法

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

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を更新するには、コンポーネントが状態を使用します。

複数のルートのレンダリング

ページ全体がReactで構築されていない場合、Reactで管理されるUIの最上位要素ごとにrenderを呼び出してください。Reactを既存プロジェクトに追加する方法

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は状態を保持します。入力に文字を入力できることから、毎秒renderを繰り返し呼び出しても破壊的ではないことがわかります。

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を複数回呼び出すことは一般的ではありません。通常は、代わりにコンポーネント内で状態を更新します。

前へpreloadModule
次へunmountComponentAtNode