在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 傳遞。

上面是我整理給大家的，希望今後對大家有幫助。

相關文章：

使用JS如何實現循環Nodelist Dom列表

#在Vue中如何實現點擊後文字變色

在Vue-cli中如何實作為單獨頁面設定背景色

#在vue中實作刷新和tab切換

#

以上是在React中有關高階組件詳細介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！