多个 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

您可以使用去抖动。以这个工具为例，如果你在 0.3s 内多次调用滚动事件中监听的函数，它在你停止滚动后只执行一次：var efficientScroll = debounce(function() {...}, 250);为什么resize用两个不同的函数监听事件。有必要吗？也许你也可以改进它。并应用去抖动。