尽管我阅读了维基百科等等,但我还是不太了解线程安全在编程意义上的含义。 是否有人能够以外行的方式提供一些Java示例? 什么使线程安全vs线程不安全? 谢谢! ...
提示:本站收集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.