API Reference
API

unmountComponentAtNode

Deprecated

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

React 18 では、unmountComponentAtNode は root.unmount() に置き換えられました。

unmountComponentAtNode は、マウントされた React コンポーネントを DOM から削除します。

unmountComponentAtNode(domNode)

リファレンス

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” をクリックするとそれが破棄されます。

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

const domNode = document.getElementById('root');

document.getElementById('render').addEventListener('click', () => {
  render(<App />, domNode);
});

document.getElementById('unmount').addEventListener('click', () => {
  unmountComponentAtNode(domNode);
});
Previousrender
Nextクライアント API