提示:本站收集StackOverFlow近2千万问答，支持中英文搜索，鼠标放在语句上弹窗显示对应的参考中文或英文， 本站还提供 中文繁体 英文版本 中英对照 版本，有任何建议请联系yoyou2525@163.com。
我有一个在 React 组件上运行的测试：
describe(`TheDate Component`, () => {
it('renders without crashing', () => {
const div = document.createElement('div');
ReactDOM.render(<TheDate />, div);
ReactDOM.unmountComponentAtNode(div);
})
})
我读到我必须使用“unmountComponentAtNode”，老实说我不太了解unmountComponentAtNode()的官方文档：
从 DOM 中移除一个挂载的 React 组件并清理它的事件处理程序和状态。 如果容器中没有安装任何组件，则调用此函数什么也不做。 如果组件已卸载，则返回 true，如果没有要卸载的组件，则返回 false。
我是测试和 React 的新手。
一次一行地执行代码的步骤。 第一行：
const div = document.createElement('div');
创建一个“div”HTMLElement。 HTML 如下所示：
<div></div>
下一行：
ReactDOM.render(<TheDate />, div);
这将创建一个 React DOM 元素并将 HTML 表示添加到 div。 生成的 HTML 看起来像这样：
<div>
(whatever HTML is created by TheDate)
<div>
最后一行：
ReactDOM.unmountComponentAtNode(div);
删除呈现到 div 中的TheDate组件，并清除与TheDate组件（如果有）关联的所有处理程序和 React 状态。
HTML 现在又是这个样子：
<div></div>
下面是一个示例，显示了每个步骤的效果：
const wrapper = document.getElementById('wrapper'); const btnAddDiv = document.getElementById('addDiv'); const btnRender = document.getElementById('render'); const btnUnmount = document.getElementById('unmount'); const pre = document.querySelector('pre'); let container; btnAddDiv.onclick = () => { container = document.createElement('div'); container.id = 'container'; wrapper.appendChild(container); showDOM(); btnAddDiv.disabled = true; btnRender.disabled = false; } btnRender.onclick = () => { const content = ReactDOM.render( <h5>I have been rendered!</h5>, container); showDOM(); btnRender.disabled = true; btnUnmount.disabled = false; } btnUnmount.onclick = () => { ReactDOM.unmountComponentAtNode(container); showDOM(); btnUnmount.disabled = true; } function showDOM() { pre.innerText = wrapper.innerHTML; } showDOM();
#wrapper { margin: 0.5rem; padding: 0.5rem; border: 1px solid blue; } pre { margin: 0.5rem; border: 1px solid black; }
<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script> <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script> <button id="addDiv">.createElement('div')</button> <button id="render" disabled="true">.render(...)</button> <button id="unmount" disabled="true">.unmountComponentAtNode(...)</button> <p>Rendered div and children:</p> <div id="wrapper"> </div> <p>HTML of div and children:</p> <pre></pre>
React 组件“挂载”在 DOM 元素（通常是<div>或其他容器元素）上。
安装的行为告诉 React 它必须从哪里开始渲染组件本身。 将“挂载点”视为 React 开始生成在视图中绘制组件所需的所有 html 的锚点。
例如，在您的测试中，您首先生成一个<div>元素。 此时在您的标记中，您有一个空容器：
<div>
</div>
然后，您在之前的<div>上“挂载”您的“日期”组件，这就是您在调用ReactDOM.render(<TheDate />, div) 。
想象一下您的组件“日期”最终呈现如下所示：
<div>
<h1>Today is <b>25th of January, 2021<b></h1> <!-- This is what React renders -->
</div>
当您通过调用ReactDOM.unmountComponentAtNode(div)卸载组件时，您基本上是在删除从标记生成的所有 react，再次导致一个空容器：
<div>
</div>
这显然是对使用 react 挂载/卸载组件时发生的情况的非常简化的解释，但希望它是“外行术语”。
声明：本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.