详解React 的几种条件渲染以及选择
对于一个展示页面来讲,通常有好几种展示状态(以列表页为例):
- 数据为空,空页面
- 取数据时发生错误,错误页面
- 数据正常
- 加载状态
针对以上三种情况,react渲染列表的时候要正确判断并渲染出相应的视图,也就是条件渲染.不同于vue的v-if,v-show等框架提供的api,react的条件渲染都是js原生的再加上一点点的hack.比如react文档提到的.if/else,&&和三目等等.
当然上面的都是常用的一些方法,但是也存在着各种问题,比如条件分支过多的的事时候代码也会越来越乱.下面提供几种具有普适性的方法
if/else,三目以及短路运算符
这三个方法都是官方文档提到的,这里就放到一起了,其实这三种方案都是类似的:在render生命周期里做相应的判断.不过三目和短路运算符可以在jsx行内使用.
if/else
classListextendsComponent{
staticpropTypes={
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对应起来
functionRender({if:cond,children}){
returncond?children:null
}
上面是简单的Render组件,使用起来是这样的
classListextendsComponent{
staticpropTypes={
status:PropTypes.oneOf(['loading','error','success','empty'])
}
render(){
const{status}=this.props
return(
加载状态
错误状态
成功状态
空状态
)
}
}
相比使用在render里使用大量的if/else上面的写法无疑更加清楚明了了.如果所有列表业务组件统一起来,状态保持一致,我们可以做更高层次的抽象,把其他状态都抽象到一个高阶函数之中,我们写代码的时候只要确保success的状态能正确渲染即可
立即执行函数
jsx里是可以写变量,同时立即执行函数也是可以的
classListextendsComponent{
staticpropTypes={
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空状态
}
})()}
)
}
}
立即函数的复用显然不太现实,所以立即函数的适用场景是那种相对比较复杂但无法复用的组件
高阶组件
对于高阶组件的概念就不做赘述了,我们把条件渲染的逻辑放到高阶组件中,除了逻辑的抽象外,也可以提高组件的复用率.
constwithList=WrappedComponent=>{
returnclassPPextendsComponent{
render(){
const{status}=this.props
switch(status){
case'loading':
return加载状态
case'error':
return错误状态
case'success':
return
如果我们可以保证所有列表的props一致(也就是都使用status判断状态),我们完全可以专注的写status为success的状态:
@withList
classListextendsComponent{
staticpropTypes={
status:PropTypes.oneOf(['loading','error','success','empty'])
}
render(){
return(
成功页面
)
}
}
其次我们可以把加载,错误,以及空状态统一抽成组件,对于提高组件的复用率无疑可以起很大作用.
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。