在React.js中显示/隐藏组件的首选方式是什么？

Question

在React中切换（显示/隐藏）组件的首选方法是什么？据我所知，有两种方法可以做到这一点。

解决方案1：

有条件地在父组件的render()方法内呈现子组件。

{
    this.state.showUserModal ? 
    <UsereModal onClose={this.onModalClose} user={this.state.selectedUser}/>
    : null
}

解决方案2：

在子组件处使用一个属性，该属性在其自己的render()方法内将返回null或基于布尔值的子项。

<UsereModal show={this.state.showUserModal} onClose={this.onModalClose} user={this.state.selectedUser}/>

第二个解决方案只初始化组件一次（构造函数被调用一次），而第一个解决方案则不初始化。我有这个问题，因为需要根据构造函数内部的道具来初始化我的状态，所以我被迫使用解决方案2。但是，解决这个问题的最React方法是什么？

Answer 1

如果要在UI中保留DOM元素，则应使用样式绑定或类绑定：

IQKeyboardManager.sharedManager().enable = false;

Answer 2

我认为第一种解决方案更好，因为您不需要使用自己的状态来初始化UsereModal组件，该状态将控制是否显示组件。我也更喜欢使用jsx符号进行条件渲染

{
     this.state.showUserModal && <UsereModal onClose={this.onModalClose} user= 
     {this.state.selectedUser}/>
}

Answer 3

在两种情况下，如果更改了父状态或道具，则父和子组件都将重新呈现。因此，第二种解决方案没有性能提升。但是，如果子组件在第二种情况下不显示，它将被安装和渲染（但未显示）。考虑到这一点，我建议使用第一种情况。