出處:《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 訊息框...