成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

react-refetch的使用小例子

blastz / 2201人閱讀

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

出處：《react設(shè)計(jì)模式和最佳實(shí)踐》 
作者：米凱萊·貝爾托利 
出版時(shí)間：2018年8月第1版（還算新）
使用react-refetch來(lái)簡(jiǎn)化api獲取數(shù)據(jù)的代碼 
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獲取數(shù)據(jù)的邏輯用高階組件抽離出來(lái)，下面我們?cè)儆?b>react-refetch來(lái)簡(jiǎn)化上面的異步代碼

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邏輯也添加了

分離列表和項(xiàng)目的職責(zé)

很明顯，List組件是一個(gè)渲染列表的組件，他的職責(zé)就是渲染列表，但是我們?cè)谶@里也處理了單個(gè)Item的邏輯，我們可以將其進(jìn)行職責(zé)分離,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來(lái)給Gist添加功能

    react-refetch的connect方法接收一個(gè)函數(shù)作為參數(shù)，這個(gè)函數(shù)返回一個(gè)對(duì)象，如果結(jié)果對(duì)象的值是一個(gè)字符串，那么獲取prop后，會(huì)對(duì)這個(gè)字符串發(fā)起請(qǐng)求，但是如果值是一個(gè)函數(shù)，那么不會(huì)立即執(zhí)行，而是會(huì)傳遞給組件，以便后續(xù)使用

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

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

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

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

    文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

    轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/101667.html

    相關(guān)文章

    • 這幾個(gè)編碼小技巧將令你 PHP 代碼更加簡(jiǎn)潔

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

      Pikachu 評(píng)論0 收藏0

    • 使用Easy Mock模擬數(shù)據(jù)，ajax請(qǐng)求數(shù)據(jù)小例子

      摘要：學(xué)習(xí)小問(wèn)題和小理解解決異步處理的問(wèn)題實(shí)際應(yīng)用中有很多問(wèn)題消耗時(shí)間，比如傳輸，數(shù)據(jù)庫(kù)處理，文件的讀寫消耗時(shí)間等，通過(guò)回調(diào)，當(dāng)成功返回時(shí)執(zhí)行，可以減少頁(yè)面更新時(shí)間。 最近學(xué)習(xí)了一下用Easy Mock模擬數(shù)據(jù)，然后通過(guò)ajax請(qǐng)求數(shù)據(jù)返回顯示到頁(yè)面上，完成一個(gè)請(qǐng)求數(shù)據(jù)和顯示的過(guò)程，下面通過(guò)一個(gè)獲取用戶信息例子來(lái)說(shuō)明一下： 1. 使用Easy Mock模擬數(shù)據(jù) 在Easy Mock上新建一...

      Corwien 評(píng)論0 收藏0

    • 寫給 Android 開發(fā)的小程序布局指南，F(xiàn)lex 布局！

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

      Salamander 評(píng)論0 收藏0

    • Python易學(xué)就會(huì)（三）turtle繪圖入門--初級(jí)篇

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

      周國(guó)輝 評(píng)論0 收藏0

    • Nest.js 入門小例子

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

      olle 評(píng)論0 收藏0

    發(fā)表評(píng)論

    0條評(píng)論

    最新活動(dòng)
    閱讀需要支付1元查看
    <