React 高階元件 HOC

來看個例子

import react,  from 'react'
class
page1
extends
component)
}  render() 
} export default page1

這個例子中在元件掛載前需要在localstorage中取出data的值，但當其他元件也需要從localstorage中取出同樣的資料進行展示的話，每個元件都需要重新寫一遍componentwillmount的**，那就會顯得非常冗餘。那麼在vue中通常我們採用:

mixins:

但是在react中我們需要採用hoc模式咯

import react,  from 'react'
return
class
extends
component)
}render() 
}}export default withstorage

當我們構建好乙個hoc之後，我們使用的時候就簡單多了，還看最開始的例子，我們就不需要寫componentwillmount了。

import react,  from 'react'
import withstorage from '@/utils/withstorage'
class
page1
extends
component
}export default withstorage(page1)

很明顯，這是乙個裝飾器模式，那麼就可以使用es7形式

import react,  from 'react'
import withstorage from '@/utils/withstorage'
@withstorage
class
page1
extends
component
}export default page1

使用場景

操縱 props

通過 ref 訪問元件例項

元件狀態提公升

用其他元素包裝元件

1，命名

把被包裝的元件名稱也包到hoc的顯示名稱中。

2，時機

不要在元件的render方法中使用hoc，盡量也不要在元件的其他生命週期中使用hoc。因為呼叫hoc的時候每次都會返回乙個新的元件，於是每次render，前一次高階元件建立的元件都會被解除安裝(unmount)，然後重新掛載(mount)本次建立的新元件，既影響效率又丟失了元件及其子元件的狀態。

3，靜態方法

如果需要使用被包裝元件的靜態方法，那麼就需要手動複製這些靜態方法，因為hoc返回的新組建不包含被包裝元件的靜態方法。

4，ref

不會被傳遞給被包裝元件

高階元件屬於函式式程式設計(functional programming)思想，對於被包裹的元件時不會感知到高階元件的存在，而高階元件返回的元件會在原來的元件之上具有功能增強的效果。而mixin這種混入的模式，會給元件不斷增加新的方法和屬性，元件本身不僅可以感知，甚至需要做相關的處理(例如命名衝突、狀態維護)，一旦混入的模組變多時，整個元件就變的難以維護，也就是為什麼如此多的react庫都採用高階元件的方式進行開發。

React 高階元件 HOC

React 高階元件（HOC）

react篇之高階元件 HOC

高階元件 HOC

React 高階元件 HOC

React 高階元件（HOC）

react篇之高階元件 HOC

高階元件 HOC

相關推薦