javascript - 是否可以在不重新渲染的情况下显示/隐藏父元素中的元素？

Question

如果我的思维过程与 React.js 的正统不同，请指正。

我有一个 parent < MainViewController />有一个 <View /> child 。

如果在我的 <View /> 中发生滚动事件, 然后我想在我的 parent 中显示/隐藏一个按钮 < 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 的核心思想是，当组件发生变化时，它会重新渲染整个 组件。为了防止这种情况变得极其缓慢，React 仅将其呈现为 DOM 的虚拟表示，然后将虚拟 DOM 与真实 DOM 进行比较，并进行最少数量的更改以使其同步。

当您更新组件中的状态时，React 将构建虚拟表示，但它几乎与真实 DOM 相同。唯一的区别是以下属性:

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

React 唯一会做的“实际”重新渲染是更新这个属性。