是否可以在不重新渲染的情況下顯示/隱藏父項中的元素？

Question

請糾正我，如果我的思維過程從React.js的正統不同..

我有一個父< MainViewController />具有<View />孩子。

如果滾動事件發生在我的<View />中，那麼我想在父母的< MainViewController />中顯示/隱藏一個按鈕。

不幸的是，現在我正在做setState切換，但它會讓父母，因此，它的所有孩子。基本上，它重置我的整個應用程序。有沒有更簡單的方法來切換隱藏/顯示而不重新渲染？

我的相關代碼：

var MainViewController = React.createClass({ 
    getInitialState() { 
    return { 
     showAskQuestion: false, 
    }; 
    }, 
    toggleFloatingButton() { 
    this.setState({ 
     showAskQuestion: !this.state.showAskQuestion 
    }); 
    }, 
    render() { 
     return (
      <Container> 
       <UI.NavigationBar name="main" /> 
     <UI.Button type="info" className={ this.state.showAskQuestion ? '' : 'hidden' } > 
      Ask A Question 
     </UI.Button>  
       <ViewManager name="main" defaultView="tabs"> 
        <View name="tabs" component={TabViewController} toggleFloatingButton={this.toggleFloatingButton} /> 
       </ViewManager> 
      </Container> 
     ); 
    } 
}); 

Answer 1

發生反應的核心思想是，當東西的成分發生變化，它重新呈現整個組件。爲了防止這種情況變得非常緩慢，React僅將它渲染到DOM的虛擬表示，然後檢查虛擬DOM與真實的DOM，並使最小數量的更改讓它們同步。

當您更新組件中的狀態時，React將構建虛擬表示，但它與真實DOM幾乎完全相同。唯一的區別是以下屬性：

className={ this.state.showAskQuestion ? '' : 'hidden'} 

只有一塊「實際」重新渲染React會做，正在更新這個屬性。