React 的几种条件渲染以及选择

xiongzenghui 发布于2019-08-23 12:28 / 2271人阅读

摘要：对于一个展示页面来讲通常有好几种展示状态以列表页为例数据为空空页面取数据时发生错误错误页面数据正常加载状态针对以上三种情况渲染列表的时候要正确判断并渲染出相应的视图也就是条件渲染不同于的等框架提供的的条件渲染都是原生的再加上一点点的比如

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

数据为空, 空页面
取数据时发生错误, 错误页面
数据正常
加载状态
针对以上三种情况, 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 
        加载状态
      
    } 
    
    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的状态:

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

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

云服务器 GPU云服务器最基本的几种 html的几种轮播 js的几种数据类型 js缓存的几种方法

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/98579.html

谈一谈创建React Component的几种方式

摘要：用这种方式创建组件时，并没有对内部的函数，进行绑定，所以如果你想让函数在回调中保持正确的，就要手动对需要的函数进行绑定，如上面的，在构造函数中对进行了绑定。当我们谈起React的时候，多半会将注意力集中在组件之上，思考如何将页面划分成一个个组件，以及如何编写可复用的组件。但对于接触React不久，还没有真正用它做一个完整项目的人来说，理解如何创建一个组件也并不那么简单。在最开始的时候...

mylxsw 2019-08-20 14:24 评论0 收藏0
关于react-router的几种配置方式

摘要：本文给大家介绍的是相比于其他框架更灵活的配置方式，大家可以根据自己的项目需要选择合适的方式。标签的方式下面我们看一个例子当为时渲染我们可以看到这种路由配置方式使用标签，然后根据找到对应的映射。路由的概念路由的作用就是将url和函数进行映射，在单页面应用中路由是必不可少的部分，路由配置就是一组指令，用来告诉router如何匹配url，以及对应的函数映射，即执行对应的代码。 react...

刘永祥 2019-08-20 18:16 评论0 收藏0
聊一聊Vue组件模版，你知道它有几种定义方式吗？

摘要：活动结束单文件组件使用构建工具创建项目，综合来看单文件组件应该是最好的定义组件的方式，而且不会带来额外的模版语法的学习成本。前端组件化开发已经是一个老生常谈的话题了，组件化让我们的开发效率以及维护成本带来了质的提升。当然因为现在的系统越来越复杂庞大，所以开发与维护成本就变得必须要考虑的问题，因此滋生出了目前的三大前端框架 Vue、Angular、React。那今天我们就来看看 V...

instein 2019-08-26 10:35 评论0 收藏0
前端面试题总结（js、html、小程序、React、ES6、Vue、算法、全栈热门视频资源）

摘要：并总结经典面试题集各种算法和插件前端视频源码资源于一身的文档，优化项目，在浏览器端的层面上提升速度，帮助初中级前端工程师快速搭建项目。本文是关注微信小程序的开发和面试问题，由基础到困难循序渐进，适合面试和开发小程序。并总结vue React html css js 经典面试题集各种算法和插件、前端视频源码资源于一身的文档，优化项目，在浏览器端的层面上提升速度，帮助初中级前端工程师快...

pumpkin9 2019-08-23 17:12 评论0 收藏0