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

Question

我想在我的网站上添加一个加载动画，因为进入网站时它的加载量很大。它是用 ReactJS 和 NodeJS 构建的，所以我需要具体了解 ReactJS 如何在最初进入站点时以及渲染新组件时有任何加载时间时添加加载动画。

有没有办法让人们已经访问我的网站，尽管它还没有完全加载，所以我可以添加一个带有一些 CSS3 动画的加载页面作为加载屏幕。问题实际上并不是如何制作加载动画。更多的是如何将其集成到ReactJS中。

非常感谢。

Answer 1

由于 ReactJS 虚拟 DOM 非常快，我认为最大的加载时间是由于异步调用造成的。您可能在 React 生命周期事件之一中运行异步代码(例如 componentWillMount)。

您的应用程序在 HTTP 调用期间看起来是空的。要创建加载程序，您需要保留异步代码的状态。

不使用 Redux 的示例

我们的应用程序将具有三种不同的状态:

• REQUEST:正在请求数据但尚未加载。
• 成功:数据成功返回。没有发生错误。
• 失败:异步代码因错误而失败。

当我们处于请求状态时，我们需要渲染微调器。数据从服务器返回后，我们将应用程序的状态更改为“成功”，这会触发组件重新渲染，并在其中渲染列表。

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