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

Is it possible to show/hide an element in a parent without rerendering?

本文关键字：隐藏 对象 元素 显示 情况下 是否 新渲染      更新时间：2023-09-26

如果我的思维过程与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>
        );
    }
});

React的核心思想是，当组件发生变化时，它会重新渲染整个组件。为了防止速度太慢，React只将其渲染为DOM的虚拟表示，然后将虚拟DOM与真实DOM进行检查，并进行最小数量的更改以使它们同步。

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

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

React唯一能做的"实际"重新渲染就是更新这个属性。

相关文章：