react 中的高階元件

摘要： 在 react 官網有高階元件定義，高階在英文中為 high order，以前在學習 javascript 的時候也經常聽到高階函式，可是聽起來覺得挺高大尚，那個時候還是似懂非懂，跟別人聊到 js 時，也愛掏出這名詞說出幾遍。不過一段時間，隨著不斷學習，才知道高階函式本質就是：函式可以作為函式...

在 react 官網有高階元件定義，高階在英文中為 high order，以前在學習 javascript 的時候也經常聽到高階函式，可是聽起來覺得挺高大尚，那個時候還是似懂非懂，跟別人聊到 js 時，也愛掏出這名詞說出幾遍。不過一段時間，隨著不斷學習，才知道高階函式本質就是：函式可以作為函式的引數，返回值…被使用，並沒有什麼神祕。那麼現在是不是高階元件也就沒啥了，就是元件可以引數和返回值傳入元件。

這裡可以理解為一個函式接受一個元件作為引數，然後返回一個元件，我們定義一個人員列表元件，然後我們需要給元件新增新功能，也就是當載入服務端資料時，資料還沒有載入完成時，我們讓列表頁顯示“載入中”，載入完成後顯示列表。我們就可以選擇對列表元件包裝一層判斷，我們可以使用高階元件來實現此功能

首先我們看第一個引數 propName 用於指定我們根據那個引數來判斷列表是否載入，如果我們 hard coding 可以寫成 this.props.list.length == 0 來判斷是返回 <div>載入中</div> 還是列表元件。返回一個函式，這個函式會接受引數 wrapperComponent  也就是列表元件，這裡我們傳入的是列表元件，看一看是如何使用這個 LoaderHOC 高階函式的吧

contacts 引數我們需要判讀屬性，ContactList 是元件