对于一个展示页面来讲, 通常有好几种展示状态(以列表页为例):

数据为空, 空页面

当然上面的都是常用的一些方法, 但是也存在着各种问题, 比如条件分支过多的的事时候代码也会越来越乱. 下面提供几种具有普适性的方法

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 
    
             加载状态      
    
    }         if (status === 'error') {      return  
    
             错误状态      
    
    }    if (status === 'success') {      return  
    
             成功状态      
    
    }    if (status === 'empty') {      return  
    
             空状态      
    
    }  }}

可以看到这种写法胜在清楚明了, 但是如果判断分支越来越多代码无可避免的会非常冗余, 同时复用性也堪忧.

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 (      
    
        
     
                加载状态        
             
     
                错误状态        
             
     
                成功状态        
             
     
                空状态        
           
    
    )    }}

相比使用在render里使用大量的if/else 上面的写法无疑更加清楚明了了. 如果所有列表业务组件统一起来, 状态保持一致, 我们可以做更高层次的抽象, 把其他状态都抽象到一个高阶函数之中, 我们写代码的时候只要确保success的状态能正确渲染即可

立即执行函数

jsx里是可以写变量, 同时立即执行函数也是可以的

class List extends Component {  static propTypes = {      status: PropTypes.oneOf(['loading', 'error', 'success', 'empty'])  }    render () {    const { status }  = this.props    return (      
    
             {(() => {          switch (status) {            case 'loading':              return 
     
      加载状态
     
                        case 'error':              return 
     
      错误状态
     
                        case 'success':              return 
     
      成功状态
     
                        case 'empty':              return 
     
      空状态
     
          }        })()}      
    
    )  }}

立即函数的复用显然不太现实, 所以立即函数的适用场景是那种相对比较复杂但无法复用的组件

高阶组件

对于高阶组件的概念就不做赘述了, 我们把条件渲染的逻辑放到高阶组件中, 除了逻辑的抽象外, 也可以提高组件的复用率.

const withList = WrappedComponent => {  return class PP extends Component {    render() {      const { status } = this.props      switch (status) {        case 'loading':          return 
    
     加载状态
    
                case 'error':          return 
    
     错误状态
    
                case 'success':          return 
                    case 'empty':          return 
    
     空状态
    
      }    }  }}

如果我们可以保证所有列表的props一致(也就是都使用status判断状态), 我们完全可以专注的写status为success的状态:

@withListclass List extends Component {  static propTypes = {    status: PropTypes.oneOf(['loading', 'error', 'success', 'empty'])  }    render () {    return (      
    
             成功页面      
    
    )  }}

其次我们可以把加载, 错误, 以及空状态统一抽成组件, 对于提高组件的复用率无疑可以起很大作用.