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事件系统

1 个答案: