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

Question

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

我在组件DidMount生命周期方法中添加了一个滚动事件。在其中，我放置了一个更改状态的函数。它的工作原理，但是当我滚动性能急剧下降时，我不知道如何使它更流畅。

当状态.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 }));

}

Answer 1

只是不要每次都调用滚动方法工作时...延迟调用它...最简单的方法是用函数包装你的函数。它应该提高性能this.activeNavTablodashdebounceconst delay = 500const activeNavTabDebounced = _.debounce(this.activeNavTab, delay)window.addEventListener("scroll", activeNavTabDebounced, {  passive: true,});然后用componentWillUnmount() {  window.removeEventListener("scroll", activeNavTabDebounced);}