你应该隐藏模式还是从 React 的 DOM 中删除它们？

Question

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

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

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

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

2. 始终在父组件中显示该组件，如下所示：

   <MakePassword />
   

   然后在组件本身内处理其整个生命周期。也就是说，组件将具有一个布尔状态变量来表示其可见性。这种方法的一些 sn-ps：

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

我敢肯定，还有混合方法和其他解决方案。

无论如何，我想我的问题的本质是想知道显示和隐藏模式的最佳解决方案：是始终呈现它们并只是切换它们的可见性，还是实际上在从 DOM 中添加和删除它们之间切换？而且，模态本身一般应该控制其生命周期还是应该由父级控制？

Answer 1

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

您可以从 React.PureComponent 继承，而不是手动编写 shouldComponentUpdate()。它相当于实现 shouldComponentUpdate() 对当前和以前的 props 和 state 进行浅比较。 - 源反应文档

class MakePassword extends React.PureComponent{
    ...
}

Answer 2

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

例如，React-Bootstrap modals 保留在 DOM 中，并允许漂亮的输入/输出动画。