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。在这些情况下，您可能需要通过从呈现它的 DOM 节点中移除所有 UI、状态和侦听器来“停止” React 应用。

在本示例中，点击“渲染 React 应用”将渲染一个 React 应用。点击“卸载 React 应用”将其销毁。

分支

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

上一页渲染

下一页客户端 API