javascript - 阻塞的 UI 状态/在 React 中显示加载动画

Question

我想在对存储在组件状态中的数据进行一些处理时显示加载动画。 bool 型加载变量控制是否显示加载动画。当我执行异步 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。工作人员在后台工作，他们的设计是为了不阻塞 UI，

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