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
  • 相关阅读:
    yii2 gii 命令行自动生成控制器和模型
    控制器中的方法命名规范
    Vue Property or method "" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based
    IDEA插件:GsonFormat
    Spring Boot : Access denied for user ''@'localhost' (using password: NO)
    Typora添加主题
    Git基础命令图解
    Java Joda-Time 处理时间工具类(JDK1.7以上)
    Java日期工具类(基于JDK1.7版本)
    Oracle SQL Developer 连接Oracle出现【 状态: 失败 -测试失败: ORA-01017: invalid username/password; logon denied】
  • 原文地址:https://www.cnblogs.com/Answer1215/p/12006487.html
Copyright © 2011-2022 走看看