javascript - 节流 Reactjs 事件系统

Question

我有一个splitpane我的 React 项目中的组件，在调整 Pane 大小时将对其宽度使用react并更改内容。拆分 Pane 组件具有以下事件监听器...

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

我查看了开发工具时间线，事件触发过于频繁，并且页面的性能未达到预期。我怎样才能限制这些事件？

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

我的状态检查 -

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

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

Answer 1

是事件触发过于频繁，还是您处理事件的方式(例如导致过多的重新渲染)？我打赌是后者，如果是这样，你可以简单地用计时器来限制它，或者使用像 Underscore's throttle 这样的助手。 .