使用:empty 伪类优化 Render 结构

在我们的代码中，经常有这样的代码

const { list = [] } = this.props
const ListItmes = list.map(() => <Itme/> )
return (
  <ul>
     { !list.length ? <Skeleton/> : <ListItmes/> }
  </ul>	
)
复制代码

Skeleton 在antd 中 3.9.2 新增 用来在需要等待加载内容的位置提供一个占位图。在我们的系统中，经常有数据判空的情况，如果antd 升级之后能有 Skeleton增强体验最好不过了，有时候需要我们自己定义空数据状态的UI。 这里我们可以使用 :empty 伪类来修饰 ul 当没有元素的情况。 这样做的好处，那么结构就会变成：

<ul>
  <ListItmes/> 
</ul>	
复制代码

试问，大家维护页面的时候，是否先查看render 再庖丁解牛去了解组件树，组件树的简介，能让代码可读性更好。 :empty 如何用？附个小 dome codepen.io/Yunkou/pen/… 记住一个原则尽量不要再html 是页面的骨架，应保持绝对简介。不要在html上增判断逻辑。