unmountComponentAtNode
用于从 DOM 中移除一个已挂载的 React 组件。
unmountComponentAtNode(domNode)
参考
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 应用程序”将会销毁它:
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); });