繁体   English   中英

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

Can someone explain in the most layman terms possible what unmountComponentAtNode' does?

提示:本站收集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 的新手。

2 个回复

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

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

3 有人可以用明确的方式向我解释,外行人的条款是什么与Ruby on Rails中的映射资源和命名路由有什么关系?

我第一次在我的工作项目中使用Ruby,所以我仍然在学习绳索(并且热爱它的每一分钟)。 虽然我理解route.rb文件中map.connect函数的要点,但我不理解Rails的“资源”和“命名路由”功能。 我在这里有我的Rails书并多次阅读,但我仍然没有得到它。 我得到的命名路线 - ...

4 有人能用外行人解释什么是JSONP吗? [重复]

这个问题已经在这里有了答案: 什么是JSONP,为什么创建它? 9个答案 我知道JSONP是具有填充的JSON 。 我了解JSON是什么,以及如何与jQuery.getJSON() 。 但是,在介绍JSONP时,我不理解callback的概念。 谁能 ...

6 有人可以用最简单的方式解释什么是“ for”循环吗?

我正在尝试学习编码,但是我无法解决“ for”循环中发生的事情。 if / else if / else语句很容易。 “ while”和“ do / while”循环也很容易。 要么 现在,我知道了“ for”循环的结构:(开始,完成,递增)。 我什至可以制作出适 ...

9 有人可以用最简单的术语解释如何使用事件侦听器吗?

我是高中编程班的初学者,目前我正在尝试编辑在线找到的HTML / Javascript游戏,并且我想更新一个称为加速的功能: 按键或按下/按下事件。 要做的是使是否按下空格键都可以使盒子加速或加速。 问题是我可以找到使用按钮的唯一好的事件侦听器示例,并且当前使用加速按钮可以运行游戏: ...

10 用外行的话说,zip有什么作用?

我在学习的某些代码中偶然发现了“ zip”。 因此,我查找了以下内容: zip(_:_:) https://developer.apple.com/documentation/swift/1541125-zip 这和牛奶差不多清澈。 zip的作用是什么?何时使用? ...

2016-03-18 01:33:49 3 223   swift/ zip
暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2022 STACKOOM.COM