使用: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上增判断逻辑。