javascript - 在 React 中，你应该隐藏模态框还是将它们从 DOM 中移除？

Question

我正在编写一个包含大量模态的 React 应用程序(但一次只有一个处于事件状态且没有嵌套模态)，我不确定在处理显示和处理时这两种解决方案中哪一种更可取隐藏这些模式:

1. 在父组件中有一个状态 bool 变量，用于确定是否应显示模式。如果此 bool 变量为 false，则不渲染该组件。如果是真的，就渲染它。允许模式通过它可以利用的传入 Prop 回调来影响此事件。示例片段:

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

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

2. 总是在父组件中显示组件，像这样:

   <MakePassword />
   

   然后在组件内部处理它的整个生命周期。也就是说，组件将有一个 bool 状态变量来表示它的可见性。这种方法的一些片段:

   <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()。它相当于通过对当前和以前的 Prop 和状态进行浅层比较来实现 shouldComponentUpdate() 。 - 源 react 文档

class MakePassword extends React.PureComponent{
    ...
}