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

創(chuàng)新互聯(lián)建站"三網(wǎng)合一"的企業(yè)建站思路。企業(yè)可建設擁有電腦版、微信版、手機版的企業(yè)網(wǎng)站。實現(xiàn)跨屏營銷，產(chǎn)品發(fā)布一步更新，電腦網(wǎng)絡+移動網(wǎng)絡一網(wǎng)打盡，滿足企業(yè)的營銷需求！創(chuàng)新互聯(lián)建站具備承接各種類型的成都網(wǎng)站制作、網(wǎng)站建設項目的能力。經(jīng)過10余年的努力的開拓，為不同行業(yè)的企事業(yè)單位提供了優(yōu)質的服務，并獲得了客戶的一致好評。

對于一個展示頁面來講, 通常有好幾種展示狀態(tài):

數(shù)據(jù)為空, 空頁面
取數(shù)據(jù)時發(fā)生錯誤, 錯誤頁面
數(shù)據(jù)正常
加載狀態(tài)
針對以上三種情況, react渲染列表的時候要正確判斷并渲染出相應的視圖, 也就是條件渲染. 不同于vue的v-if, v-show等框架提供的api, react的條件渲染都是js原生的再加上一點點的hack. 比如react文檔提到的. if/else, && 和三目等等.

當然上面的都是常用的一些方法, 但是也存在著各種問題, 比如條件分支過多的的事時候代碼也會越來越亂. 下面提供幾種具有普適性的方法

if/else, 三目以及 短路運算符

這三個方法都是官方文檔提到的, 這里就放到一起了, 其實這三種方案都是類似的: 在render生命周期里做相應的判斷. 不過三目和短路運算符可以在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 

        加載狀態(tài)
      
    } 
    
    if (status === 'error') {
      return  

        錯誤狀態(tài)
      
    }


    if (status === 'success') {
      return  

        成功狀態(tài)
      
    }

    if (status === 'empty') {
      return  

        空狀態(tài)
      
    }
  }
}

可以看到這種寫法勝在清楚明了, 但是如果判斷分支越來越多代碼無可避免的會非常冗余, 同時復用性也堪憂.

Render(IF)組件

這里的render當然不是生命周期里的render, 我們可以跟vue里的v-if對應起來

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 (
      

        
          加載狀態(tài)
        

        
          錯誤狀態(tài)
        

        
          成功狀態(tài)
        

        
          空狀態(tài)
        
      
    )
    }
}

相比使用在render里使用大量的if/else 上面的寫法無疑更加清楚明了了. 如果所有列表業(yè)務組件統(tǒng)一起來, 狀態(tài)保持一致, 我們可以做更高層次的抽象, 把其他狀態(tài)都抽象到一個高階函數(shù)之中, 我們寫代碼的時候只要確保success的狀態(tài)能正確渲染即可

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

jsx里是可以寫變量, 同時立即執(zhí)行函數(shù)也是可以的

class List extends Component {
  static propTypes = {
      status: PropTypes.oneOf(['loading', 'error', 'success', 'empty'])
  }
  
  render () {
    const { status }  = this.props
    return (
      

        {(() => {
          switch (status) {
            case 'loading':
              return 
加載狀態(tài)
            
            case 'error':
              return 
錯誤狀態(tài)
            
            case 'success':
              return 
成功狀態(tài)
            
            case 'empty':
              return 
空狀態(tài)
          }
        })()}
      
    )
  }
}

立即函數(shù)的復用顯然不太現(xiàn)實, 所以立即函數(shù)的適用場景是那種相對比較復雜但無法復用的組件

高階組件

對于高階組件的概念就不做贅述了, 我們把條件渲染的邏輯放到高階組件中, 除了邏輯的抽象外, 也可以提高組件的復用率.

const withList = WrappedComponent => {
  return class PP extends Component {
    render() {
      const { status } = this.props
      switch (status) {
        case 'loading':
          return 
加載狀態(tài)
        
        case 'error':
          return 
錯誤狀態(tài)
        
        case 'success':
          return 
        
        case 'empty':
          return 
空狀態(tài)
      }
    }
  }
}

如果我們可以保證所有列表的props一致(也就是都使用status判斷狀態(tài)), 我們完全可以專注的寫status為success的狀態(tài):

@withList
class List extends Component {
  static propTypes = {
    status: PropTypes.oneOf(['loading', 'error', 'success', 'empty'])
  }
  
  render () {
    return (
      

        成功頁面
      
    )
  }
}

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

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

網(wǎng)站標題：React如何渲染列表-創(chuàng)新互聯(lián)
分享鏈接：http://weahome.cn/article/djhiis.html