我在使用 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 应用程序并避免在滚动时重新呈现?
最佳答案
假设您为您的类创建了一个局部变量 flag
。然后:
_handleOnScrollDocument(e) {
let newFlag = (e.target.body.scrollTop > 100);
if (flag !== newFlag) {
this.setState({showCompactStatusBar: newFlag});
flag = newFlag;
}
};
仅当您从一个方向或另一个方向超过 scrollTop 阈值 (100) 时,这才会导致状态更改(和重新呈现)。否则我们根本不需要设置状态,从而避免调用 render
。
关于javascript - 避免在滚动时重新渲染并提高 React Web 应用程序的性能,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30862921/