提示:本站收集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 组件并清理其事件处理程序和 state。 如果容器中没有安装任何组件，则调用此 function 不会执行任何操作。 如果组件已卸载，则返回 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 state。
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)卸载组件时，您基本上会删除从标记生成的所有反应，从而再次产生一个空容器：
<div>
</div>
这显然是对使用 react 安装/卸载组件时发生的情况的非常简化的解释，但希望它足够“外行术语”。
声明：本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.