react refetch的使用小例子

2021-09-12 17:27:12 字數 1256 閱讀 5068

出處:《react設計模式和最佳實踐》
const list = () => 

const withdata = url => part =>

componentdidmount() ))

}render()

}}const listwithgists = withdata('')(list)

上面的**,我們將api獲取資料的邏輯用高階元件抽離出來,下面我們再用react-refetch來簡化上面的非同步**

import  from 'react-refetch'

const list = () => else if (gists.rejected)

} else if (gists.fulfilled)

}const listwithgists = refetchconnect(() => ())(list)

瞬間清爽多了,順便利用react-refetch提供的屬性,順便把loading邏輯也新增了

很明顯,list元件是乙個渲染列表的元件,他的職責就是渲染列表,但是我們在這裡也處理了單個item的邏輯,我們可以將其進行職責分離,list只做列表染,而gist也只渲染自身

const gist = () => (

)const list = () => else if (gists.rejected)

} else if (gists.fulfilled)

}

react-refetch的connect方法接收乙個函式作為引數,這個函式返回乙個物件,如果結果物件的值是乙個字串,那麼獲取prop後,會對這個字串發起請求,但是如果值是乙個函式,那麼不會立即執行,而是會傳遞給元件,以便後續使用

值為字串

const connectwithstar = refetchconnect(() => ())

值為函式

const connectwithstar = refetchconnect(() => (/star?$`,

method: 'put'}})

}))const gist = () => (

+1)加工gist元件,star函式會被傳遞給gist的prop,然後就可以在gist裡面使用了

connectwithstar(gist)

react refetch的使用小例子

出處 react設計模式和最佳實踐 const list const withdata url part componentdidmount render const listwithgists withdata list 上面的 我們將api獲取資料的邏輯用高階元件抽離出來,下面我們再用react...

類的使用,物件的使用

一 類的使用 class student school luffycity def eat self print yes defdrink self print drink 檢視print student.dict 增student.teacher gaohui print student.dict...

messagebox的使用(使用整理)

定義 messagebox顯示乙個模態對話方塊,其中包含乙個系統圖示 一組按鈕和乙個簡短的特定於應用程式訊息,如狀態或錯誤的資訊。訊息框中返回乙個整數值,該值指示使用者單擊了哪個按鈕。messagebox hwnd hwnd text,caption pchar type word hwnd 訊息框...