有人可以用最通俗的术语解释 unmountComponentAtNode' 的作用吗？

Question

我有一个在 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 的新手。

Answer 1

一次一行地执行代码的步骤。 第一行：

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>

Answer 2

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 安装/卸载组件时发生的情况的非常简化的解释，但希望它足够“外行术语”。