Добавление анимации загрузки при загрузке в ReactJS

Question

Я хотел бы добавить анимацию загрузки на мой сайт, так как она загружается совсем немного при входе на сайт. Он построен в ReactJS & NodeJS, поэтому мне нужно знать конкретно с ReactJS, как добавить анимацию загрузки при первоначальном входе на сайт, а также когда есть время загрузки при рендеринге нового компонента.

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

спасибо.

Answer 1

Поскольку ReactJS virtual DOM довольно быстр, я предполагаю, что наибольшее время загрузки связано с асинхронными вызовами. Возможно, вы запускаете асинхронный код в одном из событий жизненного цикла React (например, componentWillMount).

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

Пример без использования Redux

Мы будем иметь три различных состояния в нашем приложении:

• ЗАПРОС: в то время как данные запрашиваются, но еще не загружен.
• УСПЕХ: данные успешно возвращены. Произошла ошибка.
• FAILURE: Ошибка асинхронного кода с ошибкой.

В то время как мы находимся в состоянии запроса, нам нужно отображать счетчик. Как только данные вернутся с сервера, мы изменим состояние приложения на SUCCESS, которые запускают повторную визуализацию компонентов, в которых мы визуализируем списки.

import React from 'react' 
import axios from 'axios' 

const REQUEST = 'REQUEST' 
const SUCCESS = 'SUCCESS' 
const FAILURE = 'FAILURE' 

export default class Listings extends React.Component { 

    constructor(props) { 
    super(props) 

    this.state = {status: REQUEST, listings: []} 
    } 

    componentDidMount() { 
    axios.get('/api/listing/12345') 
     .then(function (response) { 
     this.setState({listing: response.payload, status: SUCCESS}) 
     }) 
     .catch(function (error) { 
     this.setState({listing: [], status: FAILURE}) 
     }) 
    } 

    renderSpinner() { 
     return ('Loading...') 
    } 

    renderListing(listing, idx) { 
    return (
     <div key={idx}> 
     {listing.name} 
     </div> 
    ) 
    } 

    renderListings() { 
    return this.state.listing.map(this.renderListing) 
    } 

    render() { 
    return this.state.status == REQUEST ? this.renderSpinner() : this.renderListings() 
    } 
} 

Пример использования Redux Вы можете в значительной степени сделать подобную вещь, используя Redux и Thunk промежуточное программное обеспечение.

Thunk middleware позволяет нам отправлять действия, которые являются функциями. Поэтому он позволяет нам запускать асинхронный код. Здесь мы делаем то же самое, что и в предыдущем примере: мы отслеживаем состояние асинхронного кода.

export default function promiseMiddleware() { 
    return (next) => (action) => { 
     const {promise, type, ...rest} = action 

     if (!promise) return next(action) 

     const REQUEST = type + '_REQUEST' 
     const SUCCESS = type + '_SUCCESS' 
     const FAILURE = type + '_FAILURE' 

     next({...rest, type: REQUEST}) 

     return promise 
     .then(result => { 

      next({...rest, result, type: SUCCESS}) 

      return true 
     }) 
     .catch(error => { 
      if (DEBUG) { 
       console.error(error) 
       console.log(error.stack) 
      } 
      next({...rest, error, type: FAILURE}) 

      return false 
     }) 
    } 
}