我如何在setState后在React中强制立即DOM更新(即提交)?

Question

我有一个React组件，带有一个按钮(显示"Load data ")和几个子组件，每个子组件都取一组数据并绘制它们，并且渲染速度相对较慢(Highcharts)。

按钮，当点击时，需要做以下操作:

1. 将文本从"Load Data"更改为"Loading…"'(基于this.state.isLoadingData)
2. 将空数组传递给子组件(以便它们清除最后加载的数据)
3. 发送请求到服务器获取数据
4. 当收到响应时，将服务器数据传递给子组件(以便它们绘制新数据)

操作如下:

// Make button show "Loading Data..."
this.setState( { isLoadingData: true } ); // I want DOM to update immediately after this
// Clear charts in child components
this.setState( { data: [] }, this.loadDataFromServer ); // This causes child components to re-render (a bit slow)

。loadDataFromServer将执行以下操作:

// Chart the new data in child components
this.setState( { data: newData, isLoadingData: false });

最终发生的是按钮和子组件同时更新，这引入了一个可感知的UI延迟，当按钮从"Load Data"加载…"。在我看来，虽然render()在每个setStates之后被调用(console.log()证明了这一点)，React批处理实际的DOM提交，以便DOM只在两个setStates都完成后才更新。

有什么建议吗?

请注意，setStates本身的批处理不是问题，因为我甚至已经尝试过了，但没有对主要问题产生任何影响:

this.setState( { isLoadingData: true }, () => {
this.setState( { data: [] }, this.loadDataFromServer )
}

Answer 1

通过实验，我发现使用setTimeout(即使是0延迟)会导致React以我想要的方式提交到DOM。例如

this.setState( { isLoadingData: true } );
setTimeout(() => {
this.setState( { data: [] }, this.loadDataFromServer )
}, 0);

Answer 2

为什么不同时将数据设置为空数组并将isLoadingData设置为true呢?然后下一步:this.loadDataFromServer就像这样

<>之前。setState({isLoadingData: true,data: []});setTimeout(() => {this.loadDataFromServer}, 0)