在 react js 上加载组件

Question

我在 React 上使用单页应用程序，但我遇到了函数问题，因此返回结果并呈现它需要一些时间。有了这个我想问我是否可以将它更改为异步函数以在它返回后获取结果，但其他组件也不会卡住。

我可能会误解它应该如何工作，但这是我的问题的基本示例：

class Example extends React.Component {

  state = {
    data: "whatever"
  }

  myHeavyFunction(data){
    //while this function works whole page on browser freezes for 3-5 second
    return (<div>{result}</div>);
  }

  buttonClicked(){
    this.setState({data: "new whatever"});
  }

  render(){
    return(
      <div>{this.myHeavyFunction(this.state.data)}</div>
    );
  }

}

我没有使用任何 API 请求，它只是一个处理大数据的函数。 在我的情况下，“myHeavyFunction”是一个不同的组件，我尝试使用 React.lazy/Suspense，但不幸的是它仅在您刷新页面时加载。

所以我想要在单击按钮后与加载微调器异步呈现的功能，这样页面不会刷新，其他组件也不会冻结。

Answer 1

您可以将myHeavyFunction 转换为返回Promise，并且在任何处理程序中，您可以使用Promise 链，或者将处理程序设为async 函数并等待返回值。将此与一些“加载”状态结合起来，您可以显示加载指示器。

class Example extends Component {
  state = {
    data: "whatever",
    loading: false, // <-- loading state
  };

  myHeavyFunction = () => {
    return new Promise(resolve => {
      setTimeout(() => resolve("new whatever"), 5000); // <-- "expensive cmoputation"
    });
  };

  buttonClicked = async () => { // <-- async function
    this.setState({
      loading: true // <-- loading true
    });
    const data = await this.myHeavyFunction(); // await expensive computation
    this.setState({
      data,
      loading: false // <-- loading false
    });
  };

  render() {
    const { data, loading } = this.state;
    return (
      <div>
        <div>{loading ? "loading..." : data}</div> // <-- conditional render
        <button onClick={this.buttonClicked}>Update</button>
      </div>
    );
  }
}