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

• 資料為空, 空頁面
• 取資料時發生錯誤, 錯誤頁面
• 資料正常
• 載入狀態

針對以上三種情況, 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>
  }
 }
}
 

前端全棧學習交流圈：866109386,面向1-3經驗年前端開發人員,幫助突破技術瓶頸，提升思維能力,群內有大量PDF可供自取，更有乾貨實戰專案視訊進群免費領取。

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

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

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

前端全棧學習交流圈：866109386,面向1-3經驗年前端開發人員,幫助突破技術瓶頸，提升思維能力,群內有大量PDF可供自取，更有乾貨實戰專案視訊進群免費領取。

高階元件

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

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

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