Рендеринг экрана загрузки в ожидании рендеринга DOM после обновления

Question

Я хочу отобразить экран загрузки, пока работает функция render() моего приложения React. Этот вопрос решает проблему начальной загрузки приложения, однако мне нужно выполнить обновления состояния приложения и затем повторно отрисовать приложение на основе нового состояния, что, по-видимому, очень дорого. Однако все, что я пробую, вызывает полное зависание приложения во время рендеринга. Есть ли способ визуализировать экран загрузки Dynami c, ожидая повторного рендеринга DOM?

Вот кодовый ящик, показывающий мои намерения: https://codesandbox.io/s/elated-lamarr-fhqwe?file= / src / App. js

В этом примере я хотел бы, чтобы отображался div «LOADING» (в идеале это был бы какой-то компонент Dynami c «loader») во время рендеринга других div, а затем исчезнут, когда рендеринг будет завершен.

Answer 1

У вас есть условный рендеринг для этой цели

...

this.state = {
  isLoading: true
};

...
componentDidMount() {
  expensiveCalculation(...);
  this.setState({ isLoading: false }); // Add additional state updates as per above results
}

...
render() {
  this.state.isLoading ? <Loader /> : <Component {...props} />;
}

Если вычисления дороги, вы можете использовать библиотеки, такие как memoize-one , которые помогут вам до пропустить интенсивные вычисления, если нет изменений во входных значениях.