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的核心思想是，当组件中的某些内容发生变化时，它会重新呈现整个组件。为了防止这种速度非常慢，React只将它呈现为DOM的虚拟表示，然后检查虚拟DOM与真实DOM的对比，并进行最小数量的更改以使它们同步。

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

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

唯一的＆＃34;实际＆＃34;重新渲染React会做的，就是更新这个属性。

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

1 个答案: