在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}/>

第二個解決方案只初始化組件一次（構造函數被調用一次），第一個解決方案則不初始化。 我有這個問題，因為需要基於構造函數中的props初始化我的狀態，所以我不得不使用解決方案2。但是，最React的方法是什么？

Answer 1

如果要在UI中保留DOM元素，則應使用樣式綁定或類綁定：

<UsereModal style={{display: this.state.showUserModal ? 'block' : 'none'}} />

Answer 2

我認為第一種解決方案更好，因為您不需要使用自己的狀態來初始化UsereModal組件，該狀態將控制是否顯示組件。 我也更喜歡使用jsx符號進行條件渲染

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

Answer 3

在這兩種情況下，如果更改了父狀態或道具，則父和子組件都會重新渲染。 因此，第二種解決方案沒有性能提升。 但是，如果子組件在第二種情況下不顯示，它將被安裝和渲染（但未顯示）。 考慮到這一點，我建議使用第一種情況。