React高階元件

想想以前用原生和jquery的專案，上千行的code映入眼簾，瞬間有種昏死過去的衝動。**難以維護，改乙個bug可能出現n個bug，真的是很痛苦。於是乎元件化成為了當前前端開發的主流技術。angular、vue和react很好的幫我們實現了元件化。

但是我們常常也會遇到一種情況，就是兩個元件往往有很多的重複**(可能是相同的屬性，也可能是相同的方法)。例如，在登入和註冊元件中，都會有使用者名稱和密碼，以及對他們的校驗規則。為了提高**的復用性和可維護性，react高階函式應運而生。

react之前對此的解決方案是mixin，但這造成和很多不必要的問題，後來就被廢棄掉了。使用過vue的同學，不知道有沒有使用過mixin，react高階函式的作用和它是一樣的。

高階元件其實是乙個函式，它並不是乙個元件，我們需要向它傳遞一些引數(想要操作的元件、屬性)。這麼說起來它其實一點也不高階，它的作用就是儲存一些公共的屬性和方法。

我們經常幾個人吃過乙個鍋底的那種火鍋，鍋底裡有火鍋底料和各種佐料，我們把肉和蔬菜等放進去涮一下，就可以美美的飽餐一頓。高階函式在react程式設計中扮演的角色就是火鍋鍋底的角色，它有公用的方法和屬性，而各種元件就是肉和蔬菜。如果是乙個人乙個鍋的火鍋就像沒有經過封裝的code，**量重複且維護困難。

我們先來看一段可以使用高階函式的**:

這裡有乙個second元件，它負責展示使用者名稱username

export class second extends react.component 
}componentwillmount
() );
}render
() }

下面是乙個third元件，它也負責展示使用者名稱

export class third extends react.component 
}componentwillmount
() );
}render
() }

我們看到這兩個元件除了名稱以外，其餘大量的**是一樣的，我們完全可以考慮將它們通用的**提取出來。下面就是高階元件出場的時候了。

高階元件可以寫成這樣

export const highordercomponent = (wrapcomponent, title) => 
}componentwillmount
() );
}static displayname = `hoc($)`;
render
() )}}
}

使用高階元件之後我們要對second和third元件進行修改，修改如下

class second extends react.component 
}export const highordersecond = highordercomponent(second, 'second page');

class third extends react.component 
}export const highorderthird = highordercomponent(third, 'third page');

很多同學可能會問，export出去的常量是幹什麼用的，它就是高階元件對元件進行封裝之後的乙個全新的元件，是兩者的結合。到此，我們在其它頁面引用元件就不再是引用second和third元件了，要引用的就是highordersecond和highorderthird了。

細心的同學可能會發現一些不同的地方，對於second和third的公共legend提取出去了，但並沒有將h2對應得標題提取出去，這裡只是想給大家說一下，在對元件使用高階元件包裹之後，高階元件就變成了元件的父元件，它的state可以通過props的方式向子元件傳遞，username就是這樣。我們在chrome的react外掛程式中可以觀察到這一點

hoc已經將second元件包裹起來，成為了它的父元件，它上面的match和location是我使用了react-router的緣故，我們可以不用去管它。它的state——username作為props傳給了second

今天給大家簡單的介紹了react高階元件的一些知識，後續還會再深入的挖掘react高階元件的知識和大家分享，希望對大家有幫助。

React高階元件

react高階元件

React 高階元件

React 高階元件

React高階元件

react高階元件

React 高階元件

React 高階元件

相關推薦