阻止的UI状态/在React中显示加载动画

Question

我想在对组件状态中存储的数据进行一些处理时显示加载动画。 布尔加载变量控制加载动画是否显示。这在我执行异步ajax请求时有效。 但是，当我尝试在组件方法中更改加载器的状态时，它不起作用。 我试图通过一个小的超时来避免阻止UI（请参阅代码中的注释），但无济于事。

如何在开始计算时显示加载动画并在之后再次隐藏它？

calculateMovements() {

    // show the loading animation
    this.setState({
        loading: true
    });

    let data = this.state.data;

    // ...do expensive calculations on data here...

    // avoid blocking UI
    setTimeout(function() {
        // redraw with updated data
        this.setState({
            data,
            loading: false
        });
    }.bind(this), 10);

},

render() {
    return (
         <MuiThemeProvider>
            <div id="wrap">
                <Loader
                    visible={this.state.loading}
                />
                // etc. ...

Answer 1

对于浏览器中的繁重计算，您确实需要考虑使用worker。工作人员在后台工作，他们的目的是不阻止用户界面，

• https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers

Answer 2

在调用setTimeOut时，您实际上是将setState的结果传递给setTimeOut。像这样setTimeOut ......

calculateMovements() {
    this.setState({ loading: true});
    setTimeout(function() {
        // ...do expensive calculations on data here...
        this.setState({
            data: data,
            loading: false
        });
    }.bind(this), 10);
}

然后它会正常工作。