react-refetch的使用小例子

blastz 發布于2019-08-23 15:11 / 2199人閱讀

摘要：出處設計模式和最佳實踐作者米凱萊貝爾托利出版時間年月第版還算新使用來簡化獲取數據的代碼上面的代碼，我們將獲取數據的邏輯用高階組件抽離出來，下面我們再用來簡化上面的異步代碼瞬間清爽多了，順便利用提供的屬性，順便把邏輯也添加了分離列表和

出處：《react設計模式和最佳實踐》 
作者：米凱萊·貝爾托利 
出版時間：2018年8月第1版（還算新）

使用react-refetch來簡化api獲取數據的代碼

const List = ({data: gists}) => {
  return (
    
      {gists.map(gist => (
        {gist.description}
      ))}
    
  )
}

const withData = url => Part => {
  return class extends Component {
    state = {data: []}

    componentDidMount() {
      fetch(url)
        .then(response => response.json ? response.json() : response)
        .then(data => this.setState({data}))
    }

    render() {
      return 
    }
  }
}

const ListWithGists = withData("https://api.github.com/users/gaearon/gists")(List)

上面的代碼，我們將api獲取數據的邏輯用高階組件抽離出來，下面我們再用react-refetch來簡化上面的異步代碼

import { connect as refetchConnect } from "react-refetch"

const List = ({gists}) => {
  if (gists.pending) {
    return loading...
  } else if (gists.rejected) {
    return {gists.reason}
  } else if (gists.fulfilled) {
    return (
      gists.fulfilled && 
        {gists.value.map(gist => (
          {gist.description}
        ))}
      
    )
  }
}

const ListWithGists = refetchConnect(() => ({gists: `https://api.github.com/users/gaearon/gists`}))(List)

瞬間清爽多了，順便利用react-refetch提供的屬性，順便把loading邏輯也添加了

分離列表和項目的職責

很明顯，List組件是一個渲染列表的組件，他的職責就是渲染列表，但是我們在這里也處理了單個Item的邏輯，我們可以將其進行職責分離,List只做列表染，而Gist也只渲染自身

const Gist = ({description}) => (
  
    {description}
  
)

const List = ({gists}) => {
  if (gists.pending) {
    return loading...
  } else if (gists.rejected) {
    return {gists.reason}
  } else if (gists.fulfilled) {
    return (
      gists.fulfilled && 
        {gists.value.map(gist => )}
      
    )
  }
}

使用react-refetch來給Gist添加功能

react-refetch的connect方法接收一個函數作為參數，這個函數返回一個對象，如果結果對象的值是一個字符串，那么獲取prop后，會對這個字符串發起請求，但是如果值是一個函數，那么不會立即執行，而是會傳遞給組件，以便后續使用

值為字符串
const connectWithStar = refetchConnect(() => ({gists: `https://api.github.com/users/gaearon/gists`}))

值為函數
const connectWithStar = refetchConnect(({id}) => ({
  star: () => ({
    starResponse: {
      url: `https://api.github.com/gists/${id}/star?${token}`,
      method: "PUT"
    }
  })
}))

const Gist = ({description, star}) => (
  
    {description}
    
  
)

加工Gist組件，star函數會被傳遞給Gist的prop，然后就可以在Gist里面使用了
connectWithStar(Gist)

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/101667.html

這幾個編碼小技巧將令你 PHP 代碼更加簡潔

摘要：類型檢測類型檢測也是一種讓代碼簡潔的小技巧。上文中，我們只是嘗試搜集了一些例子，在這些例子里，你只需做出一點小的努力，就可以讓你的代碼變得更好更簡潔。 showImg(https://segmentfault.com/img/remote/1460000013847223); 保持代碼簡潔和高可讀性遠遠要比我們想象的要難，有時候甚至比持續架構設計都要難。這里收集了一些可能對你重構代碼有...

Pikachu 2019-06-28 18:36 評論0 收藏0
使用Easy Mock模擬數據，ajax請求數據小例子

摘要：學習小問題和小理解解決異步處理的問題實際應用中有很多問題消耗時間，比如傳輸，數據庫處理，文件的讀寫消耗時間等，通過回調，當成功返回時執行，可以減少頁面更新時間。最近學習了一下用Easy Mock模擬數據，然后通過ajax請求數據返回顯示到頁面上，完成一個請求數據和顯示的過程，下面通過一個獲取用戶信息例子來說明一下： 1. 使用Easy Mock模擬數據在Easy Mock上新建一...

Corwien 2019-08-21 17:39 評論0 收藏0
寫給 Android 開發的小程序布局指南，Flex 布局！

摘要：不過在小程序中，這就不是我們需要考慮的了，微信已經幫我們處理好了。而在新手階段，暫時只需要關注兩個參數指定一個塊級布局，它其內的元素，總是起一個新行來顯示，而微信小程序的很多視圖容器組件，默認的就是，例如等。 showImg(https://segmentfault.com/img/remote/1460000015285633?w=750&h=562); 一、序 Hi，大家好，我是承...

Salamander 2019-08-29 15:43 評論0 收藏0
Python易學就會（三）turtle繪圖入門--初級篇

摘要：比如把上面畫正方形的例子稍做變化重復執行次畫正方形開始畫正方形結束右轉度執行后，可以看到，畫出一個非常規整漂亮的組合圖案。　　turtle圖形庫源于1966年誕生的Logo語言，是入門Python的有趣工具。因其簡單便捷的圖形化方法、和立即反饋式的繪畫效果，成為眾多編程入門者的首選。相對于大多數入門教材中枯燥的語法學習，和函數、方法的演練來說，turtle的趣味性顯得別具一格、極富效...

周國輝 2019-07-30 18:44 評論0 收藏0
Nest.js 入門小例子

摘要：例子目錄結構如下代碼編寫工具采用目錄功能具體描述項目根目錄模塊安裝目錄。此例子對的版本和以上的版本也是有要求的，具體看官方文檔。有中文文檔的，但是那個網站有時候會訪問不了。不過在上有中文翻譯的托管。此例子完整代碼在上也可以查看。 Nest.js 入門小例子前言：雖然使用官網的cli工具生成了一個基本的項目，但是由于正常開發中的項目的目錄結構往往需要自定義的，官方這個例子并不能滿足我們...

olle 2019-08-22 18:00 評論0 收藏0