您好,登錄后才能下訂單哦!
小編給大家分享一下React如何渲染列表,希望大家閱讀完這篇文章后大所收獲,下面讓我們一起去探討吧!
對(duì)于一個(gè)展示頁面來講, 通常有好幾種展示狀態(tài):
數(shù)據(jù)為空, 空頁面
取數(shù)據(jù)時(shí)發(fā)生錯(cuò)誤, 錯(cuò)誤頁面
數(shù)據(jù)正常
加載狀態(tài)
針對(duì)以上三種情況, react渲染列表的時(shí)候要正確判斷并渲染出相應(yīng)的視圖, 也就是條件渲染. 不同于vue的v-if, v-show等框架提供的api, react的條件渲染都是js原生的再加上一點(diǎn)點(diǎn)的hack. 比如react文檔提到的. if/else, && 和三目等等.
當(dāng)然上面的都是常用的一些方法, 但是也存在著各種問題, 比如條件分支過多的的事時(shí)候代碼也會(huì)越來越亂. 下面提供幾種具有普適性的方法
if/else, 三目以及 短路運(yùn)算符
這三個(gè)方法都是官方文檔提到的, 這里就放到一起了, 其實(shí)這三種方案都是類似的: 在render生命周期里做相應(yīng)的判斷. 不過三目和短路運(yùn)算符可以在jsx行內(nèi)使用.
class List extends Component { static propTypes = { status: PropTypes.oneOf(['loading', 'error', 'success', 'empty']) } render () { const { status } = this.props if (status === 'loading') { return <div> 加載狀態(tài) </div> } if (status === 'error') { return <div> 錯(cuò)誤狀態(tài) </div> } if (status === 'success') { return <div> 成功狀態(tài) </div> } if (status === 'empty') { return <div> 空狀態(tài) </div> } } }
可以看到這種寫法勝在清楚明了, 但是如果判斷分支越來越多代碼無可避免的會(huì)非常冗余, 同時(shí)復(fù)用性也堪憂.
這里的render當(dāng)然不是生命周期里的render, 我們可以跟vue里的v-if對(duì)應(yīng)起來
function Render ({ if: cond, children }) { return cond ? children : null }
上面是簡單的Render組件, 使用起來是這樣的
class List extends Component { static propTypes = { status: PropTypes.oneOf(['loading', 'error', 'success', 'empty']) } render () { const { status } = this.props return ( <div> <Render if={status === 'loading'} > 加載狀態(tài) </Render> <Render if={status === 'error'} > 錯(cuò)誤狀態(tài) </Render> <Render if={status === 'success'} > 成功狀態(tài) </Render> <Render if={status === 'empty'} > 空狀態(tài) </Render> </div> ) } }
相比使用在render里使用大量的if/else 上面的寫法無疑更加清楚明了了. 如果所有列表業(yè)務(wù)組件統(tǒng)一起來, 狀態(tài)保持一致, 我們可以做更高層次的抽象, 把其他狀態(tài)都抽象到一個(gè)高階函數(shù)之中, 我們寫代碼的時(shí)候只要確保success的狀態(tài)能正確渲染即可
jsx里是可以寫變量, 同時(shí)立即執(zhí)行函數(shù)也是可以的
class List extends Component { static propTypes = { status: PropTypes.oneOf(['loading', 'error', 'success', 'empty']) } render () { const { status } = this.props return ( <div> {(() => { switch (status) { case 'loading': return <div>加載狀態(tài)</div> case 'error': return <div>錯(cuò)誤狀態(tài)</div> case 'success': return <div>成功狀態(tài)</div> case 'empty': return <div>空狀態(tài)</div> } })()} </div> ) } }
立即函數(shù)的復(fù)用顯然不太現(xiàn)實(shí), 所以立即函數(shù)的適用場景是那種相對(duì)比較復(fù)雜但無法復(fù)用的組件
對(duì)于高階組件的概念就不做贅述了, 我們把條件渲染的邏輯放到高階組件中, 除了邏輯的抽象外, 也可以提高組件的復(fù)用率.
const withList = WrappedComponent => { return class PP extends Component { render() { const { status } = this.props switch (status) { case 'loading': return <div>加載狀態(tài)</div> case 'error': return <div>錯(cuò)誤狀態(tài)</div> case 'success': return <WrappedComponent {...this.props}/> case 'empty': return <div>空狀態(tài)</div> } } } }
如果我們可以保證所有列表的props一致(也就是都使用status判斷狀態(tài)), 我們完全可以專注的寫status為success的狀態(tài):
@withList class List extends Component { static propTypes = { status: PropTypes.oneOf(['loading', 'error', 'success', 'empty']) } render () { return ( <div> 成功頁面 </div> ) } }
其次我們可以把加載, 錯(cuò)誤, 以及空狀態(tài)統(tǒng)一抽成組件, 對(duì)于提高組件的復(fù)用率無疑可以起很大作用.
看完了這篇文章,相信你對(duì)React如何渲染列表有了一定的了解,想了解更多相關(guān)知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道,感謝各位的閱讀!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。