Javascript 如何在React中实现更好的滚动事件性能

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

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

state.open等于true时，nav元素接收类

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 }));
}

---

只要不要每次使用scroll方法时都调用

this.activeNavTab

。。。延迟调用它…最简单的方法是使用

lodash

function

debounce

包装函数。它应该提高性能

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

然后用枪杀了它

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

---

回答问题2。这不是一种好的做法，因为这不是一种应对方式。我个人并不介意，因为有时候没有办法解决，但大多数时候你应该坚持你使用的框架的实践。您的主要问题似乎是

setState

在每个滚动条上都会触发几次。也许在那里添加一个控制台日志，看看有多频繁。我喜欢你的答案，但直接调用u.debounce这种方式不容易在以后删除VentListener