javascript - 您应该在React中隐藏模式或将其从DOM中删除吗？

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

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

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

现在，在组件内，它始终可见，并且无法控制其生命周期。如果正在渲染，则可见。

总是在父组件中显示该组件，如下所示:

<MakePassword />

然后在组件本身内部处理其整个生命周期。也就是说，组件将具有 bool 状态变量以提高其可见性。此方法的一些摘要:

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

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

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

最佳答案

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

您可以从React.PureComponent继承，而不必手动编写shouldComponentUpdate()。它等效于通过对当前属性和先前的props和state进行浅比较来实现shouldComponentUpdate()。 -源 react 文档

class MakePassword extends React.PureComponent{
    ...
}

关于javascript - 您应该在React中隐藏模式或将其从DOM中删除吗？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/48574120/