多个 setState/states 冲突

Question

我有多个相互冲突的状态，导致我的导航项在滚动后显示然后消失。在我尝试检查较小的设备之前，我的滚动事件运行良好。中定义的状态似乎checkWidth导致导航项目显示。在这种情况下，有没有更好的方法来处理多个状态？所以他们只在应该的时候开火。任何帮助表示赞赏。constructor(props) {  super(props);  this.state = {    isTop: true,  };}onScroll(isTop) {  this.setState({ isTop });}componentDidMount() {  this.updateWindowDimensions();  window.addEventListener('resize', this.updateWindowDimensions);  document.addEventListener('scroll', () => {    const isTop = window.scrollY < window.innerHeight - 50;    if (isTop !== this.state.isTop) {      this.onScroll(isTop);    }  });  this.checkWidth = () => {    const match = window.matchMedia(`(max-width: 768px)`);    if (match) {      this.setState({isTop: false});    }  };  this.checkWidth();  window.addEventListener('resize', this.checkWidth);}

Answer 1

1. 您可以使用去抖动。

   以这个工具为例，如果你在 0.3s 内多次调用滚动事件中监听的函数，它在你停止滚动后只执行一次：

   var efficientScroll = debounce(function() {...}, 250);

2. 为什么resize用两个不同的函数监听事件。有必要吗？也许你也可以改进它。并应用去抖动。