您好,登錄后才能下訂單哦!
這篇“react中的refetch如何用”文章的知識(shí)點(diǎn)大部分人都不太理解,所以小編給大家總結(jié)了以下內(nèi)容,內(nèi)容詳細(xì),步驟清晰,具有一定的借鑒價(jià)值,希望大家閱讀完這篇文章能有所收獲,下面我們一起來(lái)看看這篇“react中的refetch如何用”文章吧。
使用react-refetch來(lái)簡(jiǎn)化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ù)的邏輯用高階組件抽離出來(lái),下面我們?cè)儆胷eact-refetch來(lái)簡(jiǎn)化上面的異步代碼
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é)就是渲染列表,但是我們?cè)谶@里也處理了單個(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來(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}) => ( <li> {description} <button onClick={star}>+1</button> </li> )
加工Gist組件,star函數(shù)會(huì)被傳遞給Gist的prop,然后就可以在Gist里面使用了
connectWithStar(Gist)
以上就是關(guān)于“react中的refetch如何用”這篇文章的內(nèi)容,相信大家都有了一定的了解,希望小編分享的內(nèi)容對(duì)大家有幫助,若想了解更多相關(guān)的知識(shí)內(nèi)容,請(qǐng)關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。