时间戳

首页 > 解决方案 > 子组件中的 Await 调用会阻塞父渲染吗？

ajax - 子组件中的 Await 调用会阻塞父渲染吗？

问题描述

我想知道我是否有这样的组件

class Parent extends React.Component {
  render() {
    return (
      <div>
        <h1>Hello</h1>
        <Child />
      </div>
    );
  }
}


class Child extends React.Component {
    constructor(props) {
        super(props);
        this.state = {value: ''};
      }

    async componentDidMount() {
        this.setState({value:await ajaxCallToServer() }) 
      }
    render() {
      return (
        <div>
          <h1>Child {this.state.value}</h1>
        </div>
      );
    }
  }

Child 基本上会阻止 Parent 渲染，直到 Child 完成它的 ajax 请求？

标签： ajaxreactjs

解决方案

不，子组件不会阻止父组件渲染。

一开始，Parent和Child组件都被渲染了，但是Child组件被渲染为 state value: ""。

并且当 ajax/ 网络请求成功完成时，Child组件状态被更新，Child组件被重新渲染并更新状态。

您可以Child使用以下代码更新组件并查看结果。

class Child extends React.Component {
  constructor(props) {
    super(props);
    this.state = { value: "" };
  }

  fakePromise = () => {
    return new Promise(resolve => {
      setTimeout(() => resolve("Foo"), 10000);
    });
  };

  async componentDidMount() {
    this.setState({ value: await this.fakePromise() });
  }

  render() {
    return (
      <div>
        <h1>Child {this.state.value}</h1>
      </div>
    );
  }
}

推荐阅读