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 === 'loading'} >
          加載狀態
        </Render>

        <Render if={status === 'error'} >
          錯誤狀態
        </Render>

        <Render if={status === 'success'} >
          成功狀態
        </Render>

        <Render if={status === 'empty'} >
          空狀態
        </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>
    )
  }
}

其次咱們能夠把加載, 錯誤, 以及空狀態統一抽成組件, 對於提升組件的複用率無疑能夠起很大做用.