本文主要介紹了React高階組件入門介紹，這篇文章中我們詳細的介紹了什麼是高階組件，如何使用高階組件，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟著小編過來看看吧，希望能幫助大家。
高階元件的定義
HoC 不屬於React 的API，它是實作模式，本質上是函數，接受一個或多個React 元件作為參數，傳回一個全新的React 元件，而不是改造現有的元件，這樣的元件稱為高階元件。開發過程中，有的功能需要在多個元件類別重複使用時，這時可以建立一個 Hoc。
基本用法
包裹方式
const HoC = (WrappendComponent) => {
const WrappingComponent = (props) => (
<p className="container">
<WrappendComponent {...props} />
</p>
);
return WrappingComponent;
};在上述程式碼中，接受WrappendComponent 作為參數，此參數就是將要被HoC 包裝的普通元件，在render 中包裹一個p，賦予它className 屬性，最終產生的WrappingComponent 和傳入的WrappendComponent 是兩個完全不同的元件。
在 WrappingComponent 中，可以讀取、新增、編輯、刪除傳給 WrappendComponent 的 props，也可以用其它元素包裹 WrappendComponent，用來實現封裝樣式、新增佈局或其它操作。
組合方式
const HoC = (WrappedComponent, LoginView) => {
const WrappingComponent = () => {
const {user} = this.props;
if (user) {
return <WrappedComponent {...this.props} />
} else {
return <LoginView {...this.props} />
}
};
return WrappingComponent;
};上述程式碼中有兩個元件，WrappedComponent 和LoginView，如果傳入的props 中存在user ，正常顯示的WrappedComponent 元件，否則顯示LoginView 元件，讓使用者去登入。 HoC 傳遞的參數可以為多個，傳遞多個元件自訂新元件的行為，例如使用者登入狀態下顯示主頁面，未登入顯示登入介面；在渲染清單時，傳入List 和Loading 元件，為新元件新增載入中的行為。
繼承方式
const HoC = (WrappendComponent) => {
class WrappingComponent extends WrappendComponent {
render() (
const {user, ...otherProps} = this.props;
this.props = otherProps;
return super.render();
}
}
return WrappingComponent;
};WrappingComponent 是一個新元件，它繼承自 WrappendComponent，共享父級的函式和屬性。可以使用 super.render() 或 super.componentWillUpdate() 呼叫父級的生命週期函數，但這樣會讓兩個元件耦合在一起，降低元件的複用性。
React 中對元件的封裝是按照最小可用單元的想法來進行封裝的，理想情況下，一個元件只做一件事情，符合 OOP 中的單一職責原則。如果需要對組件的功能增強，透過組合的方式或添加程式碼的方式對組件進行增強，而不是修改原有的程式碼。
注意事項
不要在render 函數中使用高階元件
render() {
// 每一次render函数调用都会创建一个新的EnhancedComponent实例
// EnhancedComponent1 !== EnhancedComponent2
const EnhancedComponent = enhance(MyComponent);
// 每一次都会使子对象树完全被卸载或移除
return <EnhancedComponent />;
}React 中的diff 演算法會比較新舊子物件樹，確定是否更新現有的子物件樹或丟掉現有的子樹並重新掛載。
必須將靜態方法做拷貝
// 定义静态方法
WrappedComponent.staticMethod = function() {/*...*/}
// 使用高阶组件
const EnhancedComponent = enhance(WrappedComponent);
// 增强型组件没有静态方法
typeof EnhancedComponent.staticMethod === 'undefined' // true#Refs屬性不能傳遞
HoC中指定的ref，並不會傳遞到子元件，需要透過回呼函數使用props 傳遞。
相關推薦：
HTML標籤與 React元件 比較_html/css_WEB-ITnose
以上是React 高階元件入門執行個體分享的詳細內容。更多資訊請關注PHP中文網其他相關文章！
