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

前端全栈学习交流圈：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>
  )
 }
}

其次咱们能够把加载, 错误, 以及空状态统一抽成组件, 对于提升组件的复用率无疑能够起很大做用.