节流Reactjs事件系统

Question

我有一个拆分窗格组件与我的React项目，在调整大小窗格将反应其宽度和改变内容。拆分窗格组件有以下事件侦听器…

    componentDidMount: function() {
        document.addEventListener('mouseup', this.onMouseUp);
        document.addEventListener('mousemove', this.onMouseMove);
        window.addEventListener('resize', this.onResize);
    }
    onMouseUp: function() {
    //firing here
    },

我查看了开发工具的时间轴，事件发生得太频繁，页面没有达到预期的效果。我该如何控制这些事件?

编辑-感谢您的快速回复，我想使用计时器而不是引入另一个模块，我知道事实上它不是状态变化，因为它只在3个断点处发生变化，并且时间轴显示事件频繁发射(黄色)

My check for state -

shouldComponentUpdate: function(nextProps, nextState) {
        console.log("STATED CHANGED")
        console.log(nextState.showStackingTableState)
        console.log(this.state.showStackingTableState)
        return nextState.showStackingTableState !== this.state.showStackingTableState;
},

更新-我想我应该这样做…如果鼠标按下，则触发一个布尔值，如果布尔值为真则节流，否则为假

Answer 1

是事件触发太频繁，还是你如何处理事件(例如导致太多的重新渲染)?我打赌是后者，如果是这样，您可以简单地使用计时器限制它，或者使用像Underscore的throttle这样的帮助器。