Question

我正在使用此反应网络应用。在其中一个组件中，我有一个程序循环运行多年，获取它们之间的所有时间并显示它们，即这是非常繁重的计算。

但这会减慢页面速度并使它变慢。在流程在后台运行之前，有没有办法显示“计算中”消息？

代码如下：

class Component extends Component {
  constructor(props) {
    super(props);
    this.state = {
      days:[]
      ..
    }
  }

  someComplexFunction(){
    // Run the complex function and set the days state
    ..
  }

  componentDidMount() {
    this.someComplexFunction();
  }

  render() {
    return (
      <div>
        {/* MAP DAYS TO LIST ITEMS */}
        ..
      </div>
    );
  }
}

Answer 1

创建isBusy属性，该属性在调用之前和收到响应之后为true，将变为false，并将管理计算过程

我用了这个https://material-ui.com/api/circular-progress/

示例

import React, { PureComponent } from 'react';
import CircularProgress from '@material-ui/core/CircularProgress';

export default class BusyWrapper extends PureComponent {

    render = _ => (
        <section>
            {this.props.isBusy &&
                <div>
                    <CircularProgress
                        thickness={4}
                    />
                </div>
            }
            {this.props.children}
        </section>
    );
}

使用方法

<BusyWrapper
   isBusy={this.state.isBusy}
>
   <YourComponent>
</BusyWrapper>

如何在后台运行繁重的程序时显示“正在计算”消息以防止延迟

1 个答案: