unmountComponentAtNode

unmountComponentAtNode(domNode)

• リファレンス
  • unmountComponentAtNode(domNode)
• 使用法
  • DOM 要素から React アプリを削除する

リファレンス

unmountComponentAtNode(domNode)

unmountComponentAtNode を呼び出して、マウントされた React コンポーネントを DOM から削除し、そのイベントハンドラと state をクリーンアップします。

import { unmountComponentAtNode } from 'react-dom';

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

unmountComponentAtNode(domNode);

さらに例を見る

引数

• domNode: DOM 要素。React はこの要素からマウント済みの React コンポーネントを削除します。

返り値

unmountComponentAtNode は、コンポーネントがアンマウントされた場合は true を、そうでない場合は false を返します。

使用法

unmountComponentAtNode を呼び出して、マウントされた React コンポーネントを ブラウザの DOM ノードから削除し、そのイベントハンドラと state をクリーンアップします。

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

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

// ...
unmountComponentAtNode(rootNode);

DOM 要素から React アプリを削除する

ときに、既存のページや、完全に React で書かれていないページに、React を「散りばめる」ことがあります。そのような場合、アプリがレンダーされた DOM ノードから UI、state、リスナをすべて削除して React アプリを「停止」する必要があるかもしれません。

以下の例では、“Render React App” をクリックすると React アプリがレンダーされます。“Unmount React App” をクリックするとそれが破棄されます。