Как забрать вещи, не дожидаясь установки всех детей?

Question

У меня есть следующая структура компонента React:

<A>
  <B>
    <C/>
  </B>
</A>

Я получаю данные в компоненте A.В настоящее время я помещаю логику выборки в componentDidMount.Но на основе https://github.com/facebook/react/blob/v15.0.1/docs/docs/ref-03-component-specs.md#mounting-componentdidmount:

Метод componentDidMount () дочерних компонентов вызывается раньше, чем у родительских компонентов.

Таким образом, выборка происходит только после A, B и C монтируются и обрабатываются

Поскольку в нашем случае A имеет глубоко вложенные компоненты, выборка должна ожидать все эти компоненты, отрисованные и смонтированные.

Есть ли способ сделать выборку раньше?

Answer 1

Нам удалось улучшить производительность, до 2 секунд быстрее, следуя рекомендациям @Julien Bourdic и @Jayavel в разделе комментариев выше:

      state = {
        isReady: false
      }

      componentDidMount() {
        fetch();
        this.setState({ isReady: true });
      }

      render() {
        return this.state.isReady ? <Wrapped {...this.props} /> : null;
      }

В основном мы визуализируем null, когда выборка не завершена,Таким образом, компоненты B и C не будут монтироваться и отображаться, что позволяет A s componentDidMount (и fetch) запускаться раньше.

Answer 2

Метод componentDidMount () дочерних компонентов вызывается раньше, чем у родительских компонентов.

Пока вы делаете что-то асинхронное, покажите загрузочный счетчик или что-то еще, пока вся информация не будетвыбирается как показано ниже:

class App extends Component {
  constructor() {
    super();
    this.state = {
      name: 'React',
      data: [],
      isLoading: true
    };
  }

  componentDidMount() {
    fetch("https://jsonplaceholder.typicode.com/users")
      .then(response => response.json())
      .then(data =>
        this.setState(() => {
          return { data , isLoading: false};
        })
      );
  }

  render() {
    if (this.state.isLoading) {
      return <p>Loading ...</p>; // initially isLoading is true, it renders a loading after fetch components will render
    }
    return (
      <div>
      <ul>
        {this.state.data.map(data => {
          return <li key={data.username}>{data.username} </li>
        })}
      </ul>
        <Hello name={this.state.name}>
          <p>
            Start editing to see some magic happen :)
          </p>
        </Hello>

      </div>
    );
  }
}

Демо

Answer 3

Если вы хотите продолжать использовать методы жизненного цикла React, хорошим вариантом будет не отображать дочерние элементы этого компонента до тех пор, пока не будет вызван componentDidMount и не будет получена ваша выборка данных.Вы могли бы использовать setState для управления этим.

В качестве альтернативы вы могли бы заняться извлечением данных вне жизненного цикла React.Это может быть хорошим вариантом в зависимости от того, какое решение для управления состоянием вы используете и от общей архитектуры вашего приложения.