成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

React 的幾種條件渲染以及選擇

xiongzenghui / 2339人閱讀

摘要：對(duì)于一個(gè)展示頁面來講通常有好幾種展示狀態(tài)以列表頁為例數(shù)據(jù)為空空頁面取數(shù)據(jù)時(shí)發(fā)生錯(cuò)誤錯(cuò)誤頁面數(shù)據(jù)正常加載狀態(tài)針對(duì)以上三種情況渲染列表的時(shí)候要正確判斷并渲染出相應(yīng)的視圖也就是條件渲染不同于的等框架提供的的條件渲染都是原生的再加上一點(diǎn)點(diǎn)的比如

對(duì)于一個(gè)展示頁面來講, 通常有好幾種展示狀態(tài)(以列表頁為例):

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

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

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

        加載狀態(tài)
      

    } 
    
    if (status === "error") {
      return  

        錯(cuò)誤狀態(tài)
      

    }


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

        成功狀態(tài)
      

    }

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

        空狀態(tài)
      

    }
  }
}

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

Render(IF)組件

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

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

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

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

        
          加載狀態(tài)
        

        
          錯(cuò)誤狀態(tài)
        

        
          成功狀態(tài)
        

        
          空狀態(tài)
        
      

    )
    }
}

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

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

jsx里是可以寫變量, 同時(shí)立即執(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 
錯(cuò)誤狀態(tài)

            
            case "success":
              return 
成功狀態(tài)

            
            case "empty":
              return 
空狀態(tài)

          }
        })()}
      

    )
  }
}

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

高階組件

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

const withList = WrappedComponent => {
  return class PP extends Component {
    render() {
      const { status } = this.props
      switch (status) {
        case "loading":
          return 
加載狀態(tài)

        
        case "error":
          return 
錯(cuò)誤狀態(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 (
      

        成功頁面
      

    )
  }
}

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

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/98579.html

相關(guān)文章

  • 談一談創(chuàng)建React Component的幾種方式

    摘要：用這種方式創(chuàng)建組件時(shí)，并沒有對(duì)內(nèi)部的函數(shù)，進(jìn)行綁定，所以如果你想讓函數(shù)在回調(diào)中保持正確的，就要手動(dòng)對(duì)需要的函數(shù)進(jìn)行綁定，如上面的，在構(gòu)造函數(shù)中對(duì)進(jìn)行了綁定。 當(dāng)我們談起React的時(shí)候，多半會(huì)將注意力集中在組件之上，思考如何將頁面劃分成一個(gè)個(gè)組件，以及如何編寫可復(fù)用的組件。但對(duì)于接觸React不久，還沒有真正用它做一個(gè)完整項(xiàng)目的人來說，理解如何創(chuàng)建一個(gè)組件也并不那么簡(jiǎn)單。在最開始的時(shí)候...

    mylxsw 評(píng)論0 收藏0

  • 關(guān)于react-router的幾種配置方式

    摘要：本文給大家介紹的是相比于其他框架更靈活的配置方式，大家可以根據(jù)自己的項(xiàng)目需要選擇合適的方式。標(biāo)簽的方式下面我們看一個(gè)例子當(dāng)為時(shí)渲染我們可以看到這種路由配置方式使用標(biāo)簽，然后根據(jù)找到對(duì)應(yīng)的映射。 路由的概念 路由的作用就是將url和函數(shù)進(jìn)行映射，在單頁面應(yīng)用中路由是必不可少的部分，路由配置就是一組指令，用來告訴router如何匹配url，以及對(duì)應(yīng)的函數(shù)映射，即執(zhí)行對(duì)應(yīng)的代碼。 react...

    劉永祥 評(píng)論0 收藏0

  • 聊一聊Vue組件模版，你知道它有幾種定義方式嗎？

    摘要：活動(dòng)結(jié)束單文件組件使用構(gòu)建工具創(chuàng)建項(xiàng)目，綜合來看單文件組件應(yīng)該是最好的定義組件的方式，而且不會(huì)帶來額外的模版語法的學(xué)習(xí)成本。 前端組件化開發(fā)已經(jīng)是一個(gè)老生常談的話題了，組件化讓我們的開發(fā)效率以及維護(hù)成本帶來了質(zhì)的提升。 當(dāng)然因?yàn)楝F(xiàn)在的系統(tǒng)越來越復(fù)雜龐大，所以開發(fā)與維護(hù)成本就變得必須要考慮的問題，因此滋生出了目前的三大前端框架 Vue、Angular、React。 那今天我們就來看看 V...

    instein 評(píng)論0 收藏0

  • 前端面試題總結(jié)（js、html、小程序、React、ES6、Vue、算法、全棧熱門視頻資源）

    摘要：并總結(jié)經(jīng)典面試題集各種算法和插件前端視頻源碼資源于一身的文檔，優(yōu)化項(xiàng)目，在瀏覽器端的層面上提升速度，幫助初中級(jí)前端工程師快速搭建項(xiàng)目。 本文是關(guān)注微信小程序的開發(fā)和面試問題，由基礎(chǔ)到困難循序漸進(jìn)，適合面試和開發(fā)小程序。并總結(jié)vue React html css js 經(jīng)典面試題 集各種算法和插件、前端視頻源碼資源于一身的文檔，優(yōu)化項(xiàng)目，在瀏覽器端的層面上提升速度，幫助初中級(jí)前端工程師快...

    pumpkin9 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<