小編給大家分享一下React如何渲染列表，希望大家閱讀完這篇文章后大所收獲，下面讓我們一起去探討吧！

成都創(chuàng)新互聯(lián)是一家集網(wǎng)站建設(shè),梁溪企業(yè)網(wǎng)站建設(shè),梁溪品牌網(wǎng)站建設(shè),網(wǎng)站定制,梁溪網(wǎng)站建設(shè)報(bào)價(jià),網(wǎng)絡(luò)營(yíng)銷,網(wǎng)絡(luò)優(yōu)化,梁溪網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強(qiáng)企業(yè)競(jìng)爭(zhēng)力?？沙浞譂M足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時(shí)我們時(shí)刻保持專業(yè)、時(shí)尚、前沿，時(shí)刻以成就客戶成長(zhǎng)自我，堅(jiān)持不斷學(xué)習(xí)、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實(shí)用型網(wǎng)站。

對(duì)于一個(gè)展示頁(yè)面來(lái)講, 通常有好幾種展示狀態(tài):

數(shù)據(jù)為空, 空頁(yè)面
取數(shù)據(jù)時(shí)發(fā)生錯(cuò)誤, 錯(cuò)誤頁(yè)面
數(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)然上面的都是常用的一些方法, 但是也存在著各種問(wèn)題, 比如條件分支過(guò)多的的事時(shí)候代碼也會(huì)越來(lái)越亂. 下面提供幾種具有普適性的方法

if/else, 三目以及 短路運(yùn)算符

這三個(gè)方法都是官方文檔提到的, 這里就放到一起了, 其實(shí)這三種方案都是類似的: 在render生命周期里做相應(yīng)的判斷. 不過(guò)三目和短路運(yùn)算符可以在jsx行內(nèi)使用.

if/else

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>
    }
  }
}

可以看到這種寫(xiě)法勝在清楚明了, 但是如果判斷分支越來(lái)越多代碼無(wú)可避免的會(huì)非常冗余, 同時(shí)復(fù)用性也堪憂.

Render(IF)組件

這里的render當(dāng)然不是生命周期里的render, 我們可以跟vue里的v-if對(duì)應(yīng)起來(lái)

function Render ({ if: cond, children }) {
    return cond ? children : null
}

上面是簡(jiǎn)單的Render組件, 使用起來(lái)是這樣的

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 上面的寫(xiě)法無(wú)疑更加清楚明了了. 如果所有列表業(yè)務(wù)組件統(tǒng)一起來(lái), 狀態(tài)保持一致, 我們可以做更高層次的抽象, 把其他狀態(tài)都抽象到一個(gè)高階函數(shù)之中, 我們寫(xiě)代碼的時(shí)候只要確保success的狀態(tài)能正確渲染即可

立即執(zhí)行函數(shù)

jsx里是可以寫(xiě)變量, 同時(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ù)的適用場(chǎng)景是那種相對(duì)比較復(fù)雜但無(wú)法復(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)), 我們完全可以專注的寫(xiě)status為success的狀態(tài):

@withList
class List extends Component {
  static propTypes = {
    status: PropTypes.oneOf(['loading', 'error', 'success', 'empty'])
  }
  
  render () {
    return (
      <div>
        成功頁(yè)面
      </div>
    )
  }
}

其次我們可以把加載, 錯(cuò)誤, 以及空狀態(tài)統(tǒng)一抽成組件, 對(duì)于提高組件的復(fù)用率無(wú)疑可以起很大作用.

看完了這篇文章，相信你對(duì)React如何渲染列表有了一定的了解，想了解更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！

網(wǎng)頁(yè)名稱：React如何渲染列表
分享地址：http://chinadenli.net/article36/ihjpsg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供定制網(wǎng)站、網(wǎng)站設(shè)計(jì)、商城網(wǎng)站、域名注冊(cè)、虛擬主機(jī)、服務(wù)器托管

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)