javascript - 避免在滚动时重新渲染并提高 React Web 应用程序的性能

Question

我在使用 React 时遇到性能问题，基本上我有 2 个紧凑的菜单，当页面滚动到距顶部 x 距离时会出现。当我滚动时，我看到 Web 应用程序的另一个组件几乎没有移动，原因是它们正在重新呈现。

要知道用户滚动时到顶部的距离，我在 componentDidMount() 上有一个事件监听器，我认为这是导致问题的原因，但我不确定，正如你所知，react 稳定版本非常新我也是这项技术的新手:

这是一些代码，正是顶部栏，其中嵌套组件并在用户从顶部滚动超过 100 像素时触发紧凑菜单栏出现:

export default class AppTopBar extends Component {
    constructor (props){
        super(props);
        this._bind("_handleOnScrollDocument");
        this.state = {
            StatusBar: false
        }
    }

    componentDidMount() {
        if (process.env.BROWSER) {
            document.addEventListener("scroll", (e) => this._handleOnScrollDocument(e), true);
        }
    }

    _handleOnScrollDocument(e) {
        if (e.target.body.scrollTop > 100) {            
            this.setState({ StatusBar: true }); 
        } else {
            this.setState({ StatusBar: false });
        }
    }

    render() {
        return (
            <div className="aui-core-apptopbar">
                <StatusBar companies={this.props.companies} compactMenuItems={this.props.compactMenuItems} StatusBar={this.state.showCompactStatusBar}/>
                <StatusBar companies={this.props.companies} userOptions={this.props.userOptions} compactMenuItems={this.props.compactMenuItems}/>
                <MainNavBarView menuItems={this.props.menuItems}/>
            </div>
        );
    }
}

我一直在调查和阅读有关组件生命周期和其他性能方面的信息，例如:PURERENDERMIXIN

您是否知道一种更好的方法来获得轻量级 Web 应用程序并避免在滚动时重新呈现？

Answer 1

假设您为您的类创建了一个局部变量 flag。然后:

_handleOnScrollDocument(e) {
  let newFlag = (e.target.body.scrollTop > 100);
  if (flag !== newFlag) {
    this.setState({showCompactStatusBar: newFlag});
    flag = newFlag;
  }
};

仅当您从一个方向或另一个方向超过 scrollTop 阈值 (100) 时，这才会导致状态更改(和重新呈现)。否则我们根本不需要设置状态，从而避免调用 render。