使用: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上增判斷邏輯。