React 高階元件入門執行個體分享

本文主要介紹了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 傳遞。

相關推薦：

使用store來最佳化React元件

React元件之間的通訊的實例教學

HTML標籤與 React元件 比較_html/css_WEB-ITnose

以上是React 高階元件入門執行個體分享的詳細內容。更多資訊請關注PHP中文網其他相關文章！