>

작업중인이반응웹 앱이 있습니다. 구성 요소 중 하나에서 여러 해 동안 반복되는 프로그램이 있으며 그 사이의 모든 날짜를 가져 와서 표시합니다. 즉, 매우 무거운 계산입니다.

그러나 이것은 페이지 속도를 늦추고 게으르게 만듭니다. 프로세스가 완료 될 때까지 백그라운드에서 프로세스가 실행되는 동안 "계산 중"메시지를 표시 할 수있는 방법이 있습니까?

코드는 다음과 같습니다.

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>
    );
  }
}

  • 답변 # 1

    와이즈 비즈 만들기  전화하기 전과 응답을받은 후 참이되는 속성은 거짓이되고 계산 과정을 관리합니다

    나는이 isBusy 를 사용

    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>

관련 자료

  • 이전 VBNET에서 PHP/MySQL을 통한 외국어 문자열
  • 다음 sql - postgresql - 매년 한 달에 몇 명의 고객이 활동하고 있습니까?