Question

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

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进行渲染，直到用ajax请求完成Child吗？

Answer 1

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

首先，同时渲染Parent和Child组件，但是Child组件以状态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>
    );
  }
}

是否会等待调用child componentDidMount阻止父级渲染？

1 个答案: