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
  • 相关阅读:
    SQL大全基本语法
    ASP.NET实现二维码
    JMeter下载及安装配置完整版
    windows下搭建nginx负载均衡
    C# 接口生成工具Swagger用法
    在IIS上部署网站,应用程序池选择.Net Framework版本为 v4.0.30319后,打开网站报错
    sqlserver 中WITH NOLOCK、HOLDLOCK、UPDLOCK、TABLOCK、TABLOCKX
    C#进阶学习笔记
    C#单例模式的理解
    实现WebService只返还json结构数据
  • 原文地址:https://www.cnblogs.com/Answer1215/p/12006487.html
Copyright © 2011-2022 走看看