高階元件的定義
hoc 不屬於 react 的 api，它是一種實現模式，本質上是乙個函式，接受乙個或多個 react 元件作為引數，返回乙個全新的 react 元件，而不是改造現有的元件，這樣的元件被稱為高階元件。開發過程中，有的功能需要在多個元件類復用時，這時可以建立乙個 hoc。
基本用法
包裹方式
const hoc = (wrappendcomponent) => ;
上述**中，接受 wrappendcomponent 作為引數，此引數就是將要被 hoc 包裝的普通元件，在 render 中包裹乙個 div，賦予它 classname 屬性，最終產生的 wrappingcomponent 和 傳入的 wrappendcomponent 是兩個完全不同的元件。
在 wrappingcompfkfpmpfiwconent 中，可以讀取、新增、編輯、刪除傳給 wrappendcomponent 的 props，也可以用其它元素包裹 wrappendcomponent，用來實現封裝樣式、新增布局或其它操作。
組合方式
const hoc = (wrappedcomponent, loginview) => = this.props;
if (user) else
}; return wrappingcomponent;
};上述**中有兩個元件，wrappedcomponent 和 loginview，如果傳入的 props 中存在 user，則正常顯示的 wrappedcomponent 元件，否則顯示 loginview 元件，讓使用者去登入。hoc 傳遞的引數可以為多個，傳遞多個元件定製新元件的行為，例如使用者登入狀態下顯示主頁面，未登入顯示登入介面；在渲染列表時，傳入 list 和 loading 元件，為新元件新增載入中的行為。
繼承方式
const hoc = (wrappendcomponent) => = this.props;
this.props = otherprops;
return super.ren
} }return wrappingcomponent;
};wrappingcomponent 是乙個新元件，它繼承自 wrappendcomponent，共享父級的函式和屬性。可以使用 super.render() 或者 super.componentwillupdate() 呼叫父級的生命週期函式，但是這樣會讓兩個元件耦合在一起，降低元件的復用性。
react 中對元件的封裝是按照最小可用單元的思想來進行封裝的，理想情況下，乙個元件只做一件事情，符合 oop 中的單一職責原則。如果需要對元件的功能增強，通過組合的方式或者新增**的方式對元件進行增強，而不是修改原有的**。
注意事項
不要在 rend程式設計客棧er 函式中使用高階元件
render()
react 中的 diff 演算法會比較新舊子物件樹，確定是否更新現有的子物件樹或丟掉現有的子樹並重新掛載。
必須將靜態方法做拷貝
// 定義靜態方法
wrappedcomponent.staticmethod = function()
// 使用高階元件
const 程式設計客棧enhancedcomponent = enhance(wrappedcomponent);
// 增強型元件沒有靜態方法
typeof enhancedcomponent.staticmethod === 'undefined' // true
refs屬性不能傳遞
hoc中指定的 ref，並不會傳遞到子元件，需要通過**函式使用 props 傳遞。
參考鏈結
高階元件
本文標題: react 高階元件入門介紹
本文位址:
React高階元件入門
在了解高階元件之前我們先了解高階函式是什麼 函式可以被作為引數傳遞 settimeout 1000 函式可以作為返回值輸出 function foo x 高階函式的應用 高階函式在時間函式上的應用 settimeout function 1000 setinterval 1000 高階函式在jque...
React高階元件入門
react高階元件入門 react高階元件也差不多快要退出主流舞台了，我是因為初學，所以記錄一下自己的理解 簡介 有點像vue的mixin 物件混入 封裝公共模組。不過react並不提倡這種做法，所以引入了一種新的概念叫高階元件 hoc 乙個函式，能夠接受乙個元件並返回乙個新的元件。命題乙個模組需要...
React高階元件
想想以前用原生和jquery的專案，上千行的code映入眼簾，瞬間有種昏死過去的衝動。難以維護，改乙個bug可能出現n個bug，真的是很痛苦。於是乎元件化成為了當前前端開發的主流技術。angular vue和react很好的幫我們實現了元件化。但是我們常常也會遇到一種情況，就是兩個元件往往有很多的重...