React渲染清單的方法介紹（附程式碼）

本篇文章帶給大家的內容是關於React渲染清單的方法介紹（附程式碼），有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。

對於一個展示頁面來講, 通常有好幾種展示狀態(以列表頁為例):

資料為空, 空白頁面
取資料時發生錯誤, 錯誤頁面
資料正常
載入狀態
針對以上三種情況, react渲染清單的時候要正確判斷並渲染出對應的視圖, 也就是條件渲染. 不同於vue的v-if, v- show等框架提供的api, react的條件渲染都是js原生的再加上一點點的hack. 例如react文件提到的. if/else, && 和三目等等.

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

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

這三個方法都是官方文檔提到的, 這裡就放到一起了, 其實這三種方案都是類似的:在render生命週期裡做對應的判斷. 不過三目和短路運算子可以在jsx行內使用.

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>
        加载状态
      </div>
    } 
    
    if (status === 'error') {
      return  <div>
        错误状态
      </div>
    }


    if (status === 'success') {
      return  <div>
        成功状态
      </div>
    }

    if (status === 'empty') {
      return  <div>
        空状态
      </div>
    }
  }
}

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

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 (
      <div>
        <Render if={status === &#39;loading&#39;} >
          加载状态
        </Render>

        <Render if={status === &#39;error&#39;} >
          错误状态
        </Render>

        <Render if={status === &#39;success&#39;} >
          成功状态
        </Render>

        <Render if={status === &#39;empty&#39;} >
          空状态
        </Render>
      </div>
    )
    }
}

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

立即執行函數

jsx裡是可以寫變數, 同時立即執行函數也是可以的

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>加载状态</div>
            
            case 'error':
              return <div>错误状态</div>
            
            case 'success':
              return <div>成功状态</div>
            
            case 'empty':
              return <div>空状态</div>
          }
        })()}
      </div>
    )
  }
}

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

高階組件

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

const withList = WrappedComponent => {
  return class PP extends Component {
    render() {
      const { status } = this.props
      switch (status) {
        case 'loading':
          return <div>加载状态</div>
        
        case 'error':
          return <div>错误状态</div>
        
        case 'success':
          return <WrappedComponent {...this.props}/>
        
        case 'empty':
          return <div>空状态</div>
      }
    }
  }
}

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

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

其次我們可以把加載, 錯誤, 以及空狀態統一抽成組件, 對於提高組件的複用率無疑可以起很大作用.

以上是React渲染清單的方法介紹（附程式碼）的詳細內容。更多資訊請關注PHP中文網其他相關文章！