Лучший способ справиться с загрузкой компонентов в реакции

Question

У меня есть приложение, которое получает сообщения от JSONPlaceholder . Он имеет начальное состояние сообщений: []. Затем он вызывает:

this.setState({posts})

Если я хочу отобразить загрузку ... до того, как компонент получит сообщения, лучше сказать:

if (!this.state.posts.length) // Do something

или лучше добавить загрузку : true в начальное состояние, затем сказал это, если компонент получил данные без ошибки:

if(!this.state.loading) // Do something

Answer 1

Во-первых, как сказано в комментарии, лучше использовать boolean type state, чем везде changeable condition.

Если вы хотите добавить loading animation, я пробовал Материал -UI обработка иногда и это удобно.

И использование довольно просто в этой ситуации. Добавьте условный рендеринг и готово.

import { CircularProgress } from '@material-ui/core';
...
render() {
  const { loading } = this.state;
  return (
    ...
    {loading ? <CircularProgress /> : <YourComponent /> ... 
    ...
  )
}