对React setState的多次更新导致重新渲染地狱和阻塞

嗨,第一次连接到Web套接字时,我收到了大约100个背对背的单个事件响应,这些响应不是Promise的一部分,但在接收到数据时按以下说明逐一处理

 handleValueStateChange = (event) => {
  const { controls } = this.state;
  let _controls = Object.entries(controls);
    for (let cont of _controls) {
        let states = cont[1].states;
            if (states) {
                let state = Object.entries(states);
                for (let [stateId, contUuid] of state) {
                    if (contUuid === event.uuid) {
                    controls[cont[0]].statesValue[stateId] = event.value; 
                    this.setState({ controls });                               
                    }
                }
            }
        }         
    } 

最初的忙碌之后,上述内容仅会被调用三到四分钟,这在随后将controls = {this.state.controls}作为子组件的道具传递时不会引起任何问题。

但是,我该如何调整上面的代码以尝试减慢在初始乱序阶段中控件状态更新的时间,因为这会由于不断的重新渲染而导致子组件的阻塞。

评论