ReactJSでロードするときに読み込みアニメーションを追加する

Question

ウェブサイトに入るときにかなり読み込まれているので、読み込み中のアニメーションを私のウェブサイトに追加したいと思います。 ReactJS & NodeJSに組み込まれているので、最初にサイトに入るときに読み込みアニメーションを追加する方法と、新しいコンポーネントをレンダリングするときに読み込み時間があるときに、ReactJSを具体的に知る必要があります。

完全にロードされていないにもかかわらず、私のウェブサイト上の人々を既に利用できるようにするため、ロード中のページにローディング画面としてCSS3アニメーションを追加できます。 質問は実際に読み込みアニメーションを作成する方法ではありません。それをReactJSに統合する方法の詳細です。

ありがとうございました。

Answer 1

ReactJS仮想DOMはかなり速いので、非同期呼び出しのために最大の読み込み時間がかかると仮定します。 React lifecycleイベントの1つで非同期コードを実行している可能性があります（componentWillMountなど）。

アプリケーションは、HTTP呼び出しに要する時間が空に見えます。ローダーを作成するには、非同期コードの状態を維持する必要があります。我々は我々のアプリで3つの異なる状態を持つことになりますReduxの

使用せず

が

例：

• REQUEST：データが要求されているが、まだロードされていないながら。
• SUCCESS：データが正常に返されました。エラーは発生しませんでした。
• FAILURE：非同期コードがエラーで失敗しました。

私たちはリクエスト状態ですが、スピナーをレンダリングする必要があります。データがサーバーから戻ったら、アプリケーションの状態をSUCCESSに変更して、コンポーネントの再レンダリングをトリガーして、レンダリングをレンダリングします。 Reduxの を使用して

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