强制React在某些视觉上重要的状态更改上快速重新呈现

Question

我需要将一些重要的UI元素的状态更改尽快传播到用户屏幕，而推迟其他元素的渲染。

我知道setState的回调，这对我没有帮助。 我认为光纤优先级可以帮助我，但是我不知道如何使用它们。

示例：

我有一个按钮，单击后必须立即将其禁用。 我还有许多其他缓慢的组件会在单击按钮时发生变化。

将已禁用的按钮和其他慢速组件一起反应批量渲染，这样就不会立即禁用该按钮。

当前的解决方法是延迟其他状态更改，使React立即禁用按钮，然后才开始修改其他组件：

this.setState({ enabled: false }, () => {
    this.debounce = setTimeout(() => {
        this.props.onModified(value);
    }, 200);
})

是否有某种明确的方法告诉React在某些重要状态更改中快速渲染而无需分批处理？

（问题不仅在于按钮，还包括立即关闭模式对话框）

https://codesandbox.io/s/kk4o612ywr

Answer 1

您可以使用setstate的callback function，类似这样，以确保呈现第一个更改。因此，您的按钮将首先被禁用，然后您可以使用其他操作来更新状态。使用超时将不准确，因为固定的时间会导致结果不准确。

这是我所做的：

  this.setState({ enabled1: false },function(){     
      this.setState(prevState => ({ data: prevState.data + 1 }));
    });  

Demo