有條件地呈現反應組件

對於在其生命週期中的某個點處隱藏的組件，渲染它的最佳方式是什麼？ 1）渲染組件，但不顯示它（display：none）。 2）僅在需要時渲染組件。什麼更好的性能？如果組件的道具和狀態稍後更新，那麼最好是讓組件存在，但隱藏在虛擬DOM中？有條件地呈現反應組件

render() { 
    return (
     <div style={{display: this.props.visible ? 'block' : 'none'}}> 
      <RestofComponentHere /> 
     </div> 
    ); 
}

或本：

render() { 
    if (!this.props.visible) { 
     return null; 
    } 
    return (
     <div> 
      <RestofComponentHere /> 
     </div> 
    ); 
}

來源

2016-12-24 reggie

如果我們談論的性能，第一個變體更好，因爲'Node'在'DOM'存在，並作出反應只是改變CSS屬性，以便顯示'Node'。第二個變體是相反的，因爲React需要根據最佳實踐向/從'DOM'添加/移除節點 - 添加或移除元素總是比僅改變元素可見性慢 –

是的。但是，在頁面的第一次渲染（組件未完全渲染時會更快）以及組件的未來使用之間也存在平衡。假設組件是一個子菜單，僅當用戶決定在頁面上過濾東西時纔會顯示。大多數用戶永遠不會這樣做。所以對於他們來說，頁面會渲染得更快...... – reggie

[如何在ReactJS中有條件加載組件]可能的重複（https://stackoverflow.com/questions/21278299/how-to-load-components-conditionally-in- reactjs） –

用什麼方式最適合這種情況下才行。有時它是方法1，有時是方法2.如果你發現它會減慢你的應用程序的速度，那麼轉換到方法1是很容易的，但是這應該只有當你有條件地渲染很多次時纔會發生。當你有組件的引用，那麼你想要始終渲染它，這樣你就可以訪問componentDidMount中的ref，所以你會隱藏它。

如回答here所示，第一種方法更快，但如果條件呈現是更乾淨的代碼，則不會爲此進行微觀優化。

我在我的應用程序中使用了混合物。

來源

2016-12-24 12:08:07

我會建議去狀態值，並有一個基於狀態值的條件來決定組件是顯示還是隱藏。

constructor(props){ 
     //Set some initial condition for display depending on prop or default value 
     //Something similar to this: 
     display: props.toDisplay === undefined ? true : props.toDisplay 
    } 

    componentDidMount(){ 
     //update the state depending on the response or change 
    } 

    onClick(event){ 
     //It might depend on someOther component's click action. 
    }

渲染方法只會有以下幾點：

render(){ 
     const toDisplay = this.state.display 
     if(toDisplay && 
     // Component To render 
     ) 
    }

來源

2017-05-22 18:43:37

有條件地呈現反應組件

回答

相關問題