Javascript 您应该在React中隐藏modals还是将其从DOM中删除？

我正在编写一个包含很多模态的React应用程序（但一次只有一个处于活动状态，没有嵌套模态），在处理显示和隐藏这些模态时，我不确定这两个解决方案中哪一个更可取：

在父组件中有一个状态布尔变量，用于确定是否应显示模态。如果此布尔变量为false，则不渲染组件。如果是真的，渲染它。允许模态通过它可以利用的传入道具回调来影响此事件。示例代码片段：

{ this.state.prompt === "makePW" ? 
  <MakePassword closeModal={this.closePWModal} /> : 
  null
}

{this.state.prompt==“makePW”？
: 
无效的
}

现在，在组件中，它始终可见，并且不控制其生命周期。如果正在渲染，则它是可见的

只需始终在父组件中显示组件，如下所示：

<MakePassword />

然后在组件内部处理其整个生命周期。也就是说，组件的可见性将有一个布尔状态变量。此方法的一些代码片段：

<Modal open={this.state.open} onClose={this.closeModal}>
    <Modal.Header>Header</Modal.Header>
    <Modal.Content>Body</Modal.Content>
</Modal>

标题
身体

还有混合方法，我相信还有其他解决方案

---

不管怎样，我想我的问题的本质是想知道显示和隐藏模态的更好的解决方案：是始终渲染它们并只是切换它们的可见性，还是在DOM中添加和删除它们之间切换？而且，模态本身通常应该控制其生命周期，还是父级呢？

我认为这取决于您的应用程序

---

例如，React引导模式保留在DOM中，这样可以实现漂亮的输入/输出动画。

我更喜欢第一个，但如果您想使用第二个，我会从PureComponent扩展makepassword组件以优化您的组件

您可以从React.PureComponent继承，而不是手工编写shouldComponentUpdate（）。这相当于实现shouldComponentUpdate（），对当前和以前的道具和状态进行了粗略的比较。-源文件

class MakePassword extends React.PureComponent{
    ...
}

---

任何一个我个人不会在不使用modals的组件上渲染modals，但会在使用modals的组件上渲染隐藏modals。这有助于实现良好的过渡，并在不需要的地方节省开销。如果两种解决方案中的任何一种都是可取的，那么我应该使用哪些其他潜在标准来做出决策？我不认为我会使用过渡。我不使用过渡，我想我永远不会。如果是这种情况，将其从DOM中删除会更好吗？如果您不打算使用转换，那么我同意没有太多理由将其保留在DOM中。对于谁应该控制模式的显示/隐藏状态有什么意见？模态本身还是父容器？父容器应该控制是否呈现模态元素，否则，不管它呈现的是

null

还是某些JSX，组件树中仍然会出现模态元素。