Question

我想在我的网站上添加一个加载动画，因为它在进入网站时加载了很多。它内置于ReactJS＆amp; NodeJS，所以我需要特别了解ReactJS如何在最初进入网站时添加加载动画，以及在渲染新组件时有任何加载时间。

有没有办法让人们在我的网站上，虽然它没有完全加载，所以我可以添加一个带有一些CSS3动画的加载页面作为加载屏幕。问题不在于如何制作加载动画。它更多的是关于如何将它集成到ReactJS中。

非常感谢。

Answer 1

由于ReactJS虚拟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中间件允许我们发送作为函数的动作。因此，它允许我们运行异步代码。在这里，我们正在做与上一个示例中相同的事情：我们跟踪异步代码的状态。

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
         })
   }
}

在ReactJS中加载时添加加载动画

1 个答案: