如果假设 2nd Render 与 1st Render 相同，那么 1st Render 是否会卸载？答案

【问题标题】：If suppose 2nd Render is same as 1st Render then 1st Render will unmounts or not?如果假设 2nd Render 与 1st Render 相同，那么 1st Render 是否会卸载？
【发布时间】：2020-09-07 21:10:28
【问题描述】：

我是 React 的初学者并且遇到了一些问题。如果假设 2nd Render 与 1st Render 相同（意味着下一个 setState() 调用不会导致状态发生任何变化），那么 1st Render 将卸载或不作为我们知道 React 只更新对 DOM 的更改。

【问题讨论】：

标签： javascript reactjs use-effect react-functional-component use-state

【解决方案1】：

第二次渲染不会卸载您的组件。如果 props 或 state 发生变化，你的组件只会重新渲染。

例如。在下面的示例中，我有一些 booleanExpression 变量将解析为 true 或 false 并且取决于它是否会呈现 <MyCoolComponent />。

如果 booleanExpression 设置为 false，我的 <MyCoolComponent /> 将被 React 从 DOM 中删除，您可以在该组件中捕获 "unmount" 事件。

booleanExpression 设置为 true 后，<MyCoolComponent /> 将再次添加到 DOM 中，您可以在该组件中捕获 "mount" 事件。

在这种情况下会发生卸载或装载：

{ booleanExpression && <MyCoolComponent /> }

注意：上面的例子只是组件条件渲染语法的一个例子，可以有多种写法。

【讨论】：