如何在 React 中的滚动事件上获得更好的性能答案

【问题标题】：How to achieve better performance on scroll event in React如何在 React 中的滚动事件上获得更好的性能
【发布时间】：2020-06-11 14:23:45
【问题描述】：

如果用户向下滚动，我想为导航栏添加颜色背景。当scrollY的值为0时，nav的背景变为透明。

我在 componentDidMount 生命周期方法中添加了滚动事件。在这里面我放了一个改变状态的函数。它可以工作，但是当我滚动时性能急剧下降，我不知道如何使它更流畅。

当 state.open 等于 true 时，导航元素接收类。

componentDidMount() {

window.addEventListener("scroll", this.activeNavTab, {
  passive: true,
  });
 }

activeNavTab() {
 if (window.scrollY > 0) {
   this.setState(() => ({ navTab: true }));
 } else {
  this.setState(() => ({ navTab: false }));
 }
}

componentWillUnmount() {
  window.removeEventListener("scroll", this.activeNavTab);
}

问题 2

在自己的自定义方法中操作 DOM 元素是一种好习惯吗？例如：

toggleMenu() {
 document.body.classList.toggle("disablescroll");
 this.setState((prevState) => ({ open: !prevState.open }));
}

【问题讨论】：

回答问题 2。这不是好的做法，因为它不是 react 方法。我个人并不介意，因为有时没有办法绕过它，但大多数时候你应该坚持你使用的框架的做法。您的主要问题似乎是 setState 每次滚动都会触发几次。也许在那里添加一个控制台日志以查看频率。

标签： javascript reactjs

【解决方案1】：

只是不要在每次滚动方法起作用时都调用this.activeNavTab...延迟调用它...最简单的方法是使用lodash函数debounce包装您的函数。它应该会提高性能

const delay = 500
const activeNavTabDebounced = _.debounce(this.activeNavTab, delay)
window.addEventListener("scroll", activeNavTabDebounced, {
  passive: true,
});

然后用

杀死它

componentWillUnmount() {
  window.removeEventListener("scroll", activeNavTabDebounced);
}

【讨论】：

我喜欢你的回答，但是以这种方式直接调用_.debounce 使得以后删除EventListener 并不容易