Ist es möglich, ein Element in einem Elternelement ein-/auszublenden, ohne erneut zu rendern?

Question

Bitte korrigieren Sie mich, wenn mein Denkprozess von der Orthodoxie React.js unterscheidet ..

Ich habe einen Elternteil < MainViewController />, die ein <View /> Kind hat.

Wenn ein Scroll-Ereignis in meinem <View /> passiert, dann möchte ich eine Schaltfläche in meinem Eltern < MainViewController /> zeigen/verbergen.

Leider mache ich gerade setState um zu schalten, aber es rerders Elternteil und konsequenterweise alle seine Kinder. Im Grunde setzt es meine gesamte App zurück. Gibt es einen einfacheren Weg, um ausblenden/anzeigen ohne neu zu rendern?

Mein entsprechender Code:

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

Die Kernidee von React ist, dass, wenn etwas in einer Komponente ändert, ist es die gesamte Komponente wieder macht. Um zu verhindern, dass dies furchtbar langsam wird, rendert React es nur so weit wie eine virtuelle Repräsentation des DOM, dann prüft es das virtuelle DOM gegen das echte und führt die minimale Anzahl von Änderungen durch, um sie zu synchronisieren.

Wenn Sie den Status in Ihrer Komponente aktualisieren, baut React die virtuelle Darstellung auf, aber sie ist fast identisch mit dem echten DOM. Der einzige Unterschied ist, das folgende Attribut:

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

Das einzige Stück „tatsächlichen“ Re-Rendering reagieren wird, ist die Aktualisierung dieses Attributs.