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


Posted in Javascript onOctober 23, 2018

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

  • 数据为空, 空页面
  • 取数据时发生错误, 错误页面
  • 数据正常
  • 加载状态

针对以上三种情况, 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>
  )
 }
}

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

高阶组件

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

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

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 面向对象编程基础:封装
Aug 21 Javascript
Jquery Select操作方法集合脚本之家特别版
May 17 Javascript
给artDialog 5.02 增加ajax get功能详细介绍
Nov 13 Javascript
js实现楼层效果的简单实例
Jul 15 Javascript
Bootstrap模态框调用功能实现方法
Sep 19 Javascript
用 Vue.js 递归组件实现可折叠的树形菜单(demo)
Dec 25 Javascript
使用webpack搭建react开发环境的方法
May 15 Javascript
Vue中父子组件通讯之todolist组件功能开发
May 21 Javascript
微信小程序激励式视频广告组件使用详解
Dec 06 Javascript
JS中的继承操作实例总结
Jun 06 Javascript
ES11新增的这9个新特性,你都掌握了吗
Oct 15 Javascript
js仿淘宝放大镜效果
Dec 28 Javascript
详解create-react-app 2.0版本如何启用装饰器语法
Oct 23 #Javascript
彻底弄懂 JavaScript 执行机制
Oct 23 #Javascript
深入理解JavaScript 中的执行上下文和执行栈
Oct 23 #Javascript
浅谈JavaScript 代码整洁之道
Oct 23 #Javascript
使用jquery Ajax实现上传附件功能
Oct 23 #jQuery
详解如何构建Promise队列实现异步函数顺序执行
Oct 23 #Javascript
jquery实现动态添加附件功能
Oct 23 #jQuery
You might like
PHP中source #N问题的解决方法
2014/01/27 PHP
php使用递归计算文件夹大小
2014/12/24 PHP
php绘制一条直线的方法
2015/01/24 PHP
PHP在线调试执行的实现方法(附demo源码)
2016/04/28 PHP
Yii2创建控制器(createController)方法详解
2016/07/23 PHP
PHP unlink与rmdir删除目录及目录下所有文件实例代码
2018/02/07 PHP
PHP filesize函数用法浅析
2019/02/15 PHP
javascript 面向对象编程  function是方法(函数)
2009/09/17 Javascript
JavaScript Cookie的读取和写入函数
2009/12/08 Javascript
两个数组去重的JS代码
2013/12/04 Javascript
使用 Node.js 对文本内容分词和关键词抽取
2017/05/27 Javascript
vue.js国际化 vue-i18n插件的使用详解
2017/07/07 Javascript
vue中过滤器filter的讲解
2019/01/21 Javascript
Vue.js递归组件实现组织架构树和选人功能案例分析
2019/07/03 Javascript
Vue中rem与postcss-pxtorem的应用详解
2019/11/20 Javascript
原生js+ajax分页组件
2020/01/30 Javascript
解决js中的setInterval清空定时器不管用问题
2020/11/17 Javascript
[02:41]DOTA2亚洲邀请赛小组赛第三日 赛事回顾
2015/02/01 DOTA
利用ctypes提高Python的执行速度
2016/09/09 Python
Pyqt实现无边框窗口拖动以及窗口大小改变
2018/04/19 Python
python远程调用rpc模块xmlrpclib的方法
2019/01/11 Python
对Python 检查文件名是否规范的实例详解
2019/06/10 Python
对pyqt5中QTabWidget的相关操作详解
2019/06/21 Python
Django组件content-type使用方法详解
2019/07/19 Python
python数据归一化及三种方法详解
2019/08/06 Python
python中时间转换datetime和pd.to_datetime详析
2019/08/11 Python
python批量修改交换机密码的示例
2020/09/22 Python
python如何写个俄罗斯方块
2020/11/06 Python
Java中各种基本数据类型的默认值都是什么
2016/12/22 面试题
个人求职简历的自我评价范文
2013/10/09 职场文书
门卫岗位职责
2013/11/15 职场文书
《明天,我们毕业》教学反思
2014/04/24 职场文书
政府法律服务方案
2014/06/14 职场文书
反四风个人对照检查材料
2014/09/26 职场文书
小学教师年度个人总结
2015/02/05 职场文书
公司周年庆典致辞
2015/07/30 职场文书