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

Question

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

解决方案一:

在父组件的 render() 方法中有条件地渲染子组件。

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

解决方案 2:

在其自身的 render() 方法内使用子组件的属性返回 null 或基于 bool 值的子组件。

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

第二种解决方案导致只初始化组件一次(构造函数被调用一次)，而第一种解决方案则不会。我对此有疑问，因为需要根据构造函数中的 props 初始化我的状态，所以我不得不使用解决方案 2。但是处理这个问题的最 React 方法是什么？

Answer 1

在这两种情况下，如果父状态或 Prop 发生变化，父组件和子组件都将被重新渲染。因此，第二种解决方案没有性能提升。但是如果子组件不应该在第二种情况下显示，它将被挂载和渲染(但不显示)。考虑到这一点，我建议使用第一种情况。