react 高階組件之小學版

　　高階組件  多麼高大上的概念，通常用來實現組件邏輯的抽象和複用，在不少三方庫（redux）中都被使用到，可是開發普通有任務項目時，若是能合理使用高階組件，也會顯著的提升代碼質量。

　　咱們今天就用最簡單的邏輯來搞一搞這個傢伙

 

　　咱們先看一個栗子，看看這個傢伙是如何進行邏輯複用的；

　　如今有一個組件MyComponent，須要從LocalStorage中獲取數據， 而後渲染到界面。

　　通常狀況下，咱們能夠這樣實現：

　

 

　　代碼很簡單，但當其餘組件也須要從LocalStorage中獲取一樣的數據展現出來時，每一個組件都須要重寫一次componentWillMount中的代 碼，這顯然是很冗餘的。

　　下面讓咱們來看看使用高階組件改寫這部分代碼：

　　

　　

　　withPersistentData就是一個高階組件，它返回一個新的組件，在新組件的componentWillMount中統一處理從LocalStorage中獲取數據的邏輯，而後將獲取到的數據經過props傳遞給被包裝的組件WrappedComponent，這樣在WrappedComponent中就能夠直接使用
this.props.data獲取須要展現的數據。

　　當有其餘的組件也須要這段邏輯時，繼續使用withPersistentData這個高階組件包裝這些組件。

　　

　　是否是還算不麻煩，OK，那咱們再講講，除了這個操做props的場景外，還有那些使用場景

　　高階組件的使用場景主要有如下4種：

　　（1）操縱props (上個栗子)

　　（2）經過ref訪問組件實例

　　（3）組件狀態提高

　　（4）用其餘元素包裝組件

 

　　固然高階組件除了組件，還能夠傳參 形式以下：

　　　　HOC(...params)(WrappedComponent)

　　一個比較典型的栗子就是react-redux裏的connect函數

　　connect(mapStateToProps, mapDispatchToProps) (WrappedComponent)

　　

　　這個函數會將一個React組件鏈接到Redux 的 store上，在鏈接的過程當中，connect經過函數參數mapStateToProps從全局store中取出當前組件須要的state，並把state轉化成當前組件的props；

　　同時經過函數參數mapDispatchToProps把當前組件用到的Redux的action creators以props的方式傳遞給當前組件。

 

　　上栗子：

　　

 

　　基本上就這樣，其實今天只說了高階組件的一小部分，不過什麼都不能一蹴而就，最好的學習方法就是在實踐中前行；

 

　　參考資料：

　　　　React+進階之路 （PS：推薦初學者入手）