节流 Reactjs 事件系统

Question

我的 React 项目有一个 splitpane 组件，在调整窗格大小后，窗格将对其宽度做出反应并更改内容。拆分窗格组件具有以下事件侦听器...

    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;
},

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

Answer 1

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

这样的助手

节流 Reactjs 事件系统

Throttle Reactjs Event System

javascript

performance

jquery

google-chrome-devtools

reactjs