您好,登錄后才能下訂單哦!
這篇文章給大家分享的是有關(guān)react-refetch怎么用的內(nèi)容。小編覺得挺實(shí)用的,因此分享給大家做個(gè)參考,一起跟隨小編過來看看吧。
使用react-refetch來簡化api獲取數(shù)據(jù)的代碼
const List = ({data: gists}) => { return ( <ul> {gists.map(gist => ( <li key={gist.id}>{gist.description}</li> ))} </ul> ) } 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 <Part {...this.state} {...this.props} /> } } } const ListWithGists = withData('https://api.github.com/users/gaearon/gists')(List)
上面的代碼,我們將api獲取數(shù)據(jù)的邏輯用高階組件抽離出來,下面我們再用react-refetch來簡化上面的異步代碼
import { connect as refetchConnect } from 'react-refetch' const List = ({gists}) => { if (gists.pending) { return <div>loading...</div> } else if (gists.rejected) { return <div>{gists.reason}</div> } else if (gists.fulfilled) { return ( gists.fulfilled && <ul> {gists.value.map(gist => ( <li key={gist.id}>{gist.description}</li> ))} </ul> ) } } const ListWithGists = refetchConnect(() => ({gists: `https://api.github.com/users/gaearon/gists`}))(List)
瞬間清爽多了,順便利用react-refetch提供的屬性,順便把loading邏輯也添加了
分離列表和項(xiàng)目的職責(zé)
很明顯,List組件是一個(gè)渲染列表的組件,他的職責(zé)就是渲染列表,但是我們在這里也處理了單個(gè)Item的邏輯,我們可以將其進(jìn)行職責(zé)分離,List只做列表染,而Gist也只渲染自身
const Gist = ({description}) => ( <li> {description} </li> ) const List = ({gists}) => { if (gists.pending) { return <div>loading...</div> } else if (gists.rejected) { return <div>{gists.reason}</div> } else if (gists.fulfilled) { return ( gists.fulfilled && <ul> {gists.value.map(gist => <Gist key={gist.id} {...gist} />)} </ul> ) } }
使用react-refetch來給Gist添加功能
react-refetch
的connect方法接收一個(gè)函數(shù)作為參數(shù),這個(gè)函數(shù)返回一個(gè)對象,如果結(jié)果對象的值是一個(gè)字符串,那么獲取prop后,會(huì)對這個(gè)字符串發(fā)起請求,但是如果值是一個(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}) => ( <li> {description} <button onClick={star}>+1</button> </li> )
加工Gist組件,star函數(shù)會(huì)被傳遞給Gist的prop,然后就可以在Gist里面使用了
connectWithStar(Gist)
感謝各位的閱讀!關(guān)于“react-refetch怎么用”這篇文章就分享到這里了,希望以上內(nèi)容可以對大家有一定的幫助,讓大家可以學(xué)到更多知識,如果覺得文章不錯(cuò),可以把它分享出去讓更多的人看到吧!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。