如何在 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.activeNavTablodashdebounce

const delay = 500

const activeNavTabDebounced = _.debounce(this.activeNavTab, delay)

window.addEventListener("scroll", activeNavTabDebounced, {

  passive: true,

});

然后用

componentWillUnmount() {

  window.removeEventListener("scroll", activeNavTabDebounced);

}