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