Будет ли ожидание вызова в дочернем componentDidMount заблокировать родительский рендеринг?

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 от рендеринга до тех пор, пока Child не выполнит запрос ajax?

Answer 1

Нет, дочерний компонент не будет блокировать рендеринг родительского компонента.

Сначала отображается компонент Parent и Child, но компонент Child отображается с состоянием value: "".

И когда запрос ajax / network успешно выполнен, состояние компонента 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>
    );
  }
}