unmountComponentAtNode

已废弃

此 API 将在未来的 React 主要版本中被移除。

在 React 18, unmountComponentAtNode 已被 root.unmount() 取代。

unmountComponentAtNode 用于从 DOM 中移除一个已挂载的 React 组件。

unmountComponentAtNode(domNode)

参考
- unmountComponentAtNode(domNode)
用法
- 从 DOM 节点移除 React 应用程序

参考

`unmountComponentAtNode(domNode)`

使用 unmountComponentAtNode 从 DOM 中移除一个已挂载的 React 组件，并清除相关事件处理程序与状态。

import { unmountComponentAtNode } from 'react-dom';

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

unmountComponentAtNode(domNode);

参见下面更多示例。

参数

domNode：DOM 节点。React 将从此节点移除已挂载的 React 组件。

返回值

如果 unmountComponentAtNode 成功移除对应的组件，将返回 true，否则返回 false。

用法

使用 unmountComponentAtNode 从浏览器 DOM 节点中移除已挂载的 React 组件，并清除有关事件处理程序与状态。

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 编写的页面上使用 React。在这些情况下，你可能需要从相关的 DOM 节点上移除所有 UI、状态和监听器，来“停止”React 应用程序。

在这个例子中，点击“渲染 React 应用程序”将会渲染一个 React 应用程序；而点击“卸载 React 应用程序”将会销毁它：

Fork

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);
});