zoukankan      html  css  js  c++  java
  • [React] Fetch Data with React Suspense

    Let's get started with the simplest version of data fetching with React Suspense. It may feel a little awkward, but I promise you that you wont be writing your code like this. When Suspense is stable, there will be libraries that integrate with Suspense. But this is approximately what those abstractions will do, so it's a good thing to know.

    For a normal React App process, we need to first init component 'PokemonInfo', then we send a fetch request to get data from server.

    function App() {
      return (
        <div className="pokemon-info">
            <PokemonInfo />
        </div>
      )
    }

    Using Suspense, we don't need to wait component init, we can send request in the very beginning.

    To do that, we can wrap the component inside:

    <React.Suspense
        fallback={
          console.log('loading pokemon...') && <div>Loading pokemon...</div>
        }
    >
      <Your-component / >
    </React.Suspense>

    You need to provide a 'fallback' prop which provide a JXS to rendering during fetching the data.

    function App() {
      return (
        <div className="pokemon-info">
          <React.Suspense
            fallback={
              console.log('loading pokemon...') && <div>Loading pokemon...</div>
            }
          >
            <PokemonInfo />
          </React.Suspense>
        </div>
      )
    }

    For the data fetching and component rendering:

    'pokemonPromise': send fetching request right away, then assign the data to variable 'pokemon'.

    Inside component, we just check whether we have 'pokemon' data already, if not, we 'throw poekmonPromise', React Suspense will catch the promise, when it resolves, React will render the component.

    let pokemon
    let pokemonPromise = fetchPokemon('pikachu').then(p => {
      console.log('promise resolve')
      pokemon = p
    })
    
    function PokemonInfo() {
      console.log('PokemonInfo init')
    
      if (!pokemon) {
        throw pokemonPromise // this API might change
      }
    
      return (
        <div>
          <div className="pokemon-info__img-wrapper">
            <img src={pokemon.image} alt={pokemon.name} />
          </div>
          <PokemonDataView pokemon={pokemon} />
        </div>
      )
    }
    /*
    loading pokemon... // fallback rendering
    promise resolve.     // data fetched
    loading pokemon... // re-rendering the component inside React.Suspense
    PokemonInfo init.   // component rendered
    */

    ---

    import React from 'react'
    import fetchPokemon from '../fetch-pokemon'
    import {PokemonDataView} from '../utils'
    
    let pokemon
    let pokemonPromise = fetchPokemon('pikachu').then(p => {
      console.log('promise resolve')
      pokemon = p
    })
    
    function PokemonInfo() {
      console.log('PokemonInfo init')
    
      if (!pokemon) {
        throw pokemonPromise // this API might change
      }
    
      return (
        <div>
          <div className="pokemon-info__img-wrapper">
            <img src={pokemon.image} alt={pokemon.name} />
          </div>
          <PokemonDataView pokemon={pokemon} />
        </div>
      )
    }
    
    function App() {
      return (
        <div className="pokemon-info">
          <React.Suspense
            fallback={
              console.log('loading pokemon...') && <div>Loading pokemon...</div>
            }
          >
            <PokemonInfo />
          </React.Suspense>
        </div>
      )
    }
    
    export default App
  • 相关阅读:
    ubuntu 11.10(32位系统)下编译android源码
    12 个基于 Rails 框架开发的 CMS 系统
    36 个 CSS 框架推荐
    再来 10 个新鲜的 HTML5 教程
    汇编程序开发环境搭配(转)
    推荐:介绍一个UndoFramework
    细数 Windows 平台上的 NoSQL 数据库
    使用ShareKit一键分享到Facebook,Twitter等平台
    25个jQuery的编程小抄
    10款iOS高效开发必备的ObjectiveC类库
  • 原文地址:https://www.cnblogs.com/Answer1215/p/12006487.html
Copyright © 2011-2022 走看看