React中如何使用高階組件

本文小編為大家詳細介紹“React中如何使用高階組件”，內容詳細，步驟清晰，細節處理妥當，希望這篇“React中如何使用高階組件”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學習新知識吧。

是什么

高階組件是一個函數，能夠接受一個組件并返回一個新的組件。沒有任何副作用。

為什么用

封裝并抽離組件的通用邏輯，讓此部分邏輯在組件間更好地被復用。

如何用

//hoc為我們的高階組件，可以使用es7裝飾器語法來使用高階組件
//當然也可以不用es7，如：let hocHello = hoc(Hello)，只是es7的語法更優雅一些。
//高階組件可以疊加使用，可以對一個組件使用多個高階組件
@hoc       
class Hello extends React.Component {
 //
}

如何實現

屬性代理

下面的例子是最簡單的一個實現

function hoc(ImportComponent) {
 return class Hoc extends React.Component {
 static displayName = `Hoc(${getDisplayName(ImportComponent)})` //displayName是設置高階組件的顯示名稱
 render() {
  return <ImportComponent {...this.props} />
 }
 }
}

function getDisplayName(Component) {
 return Component.displayName || Component.name || "Component"
}

作用：操作prop，refs獲取組件實例

注意事項：靜態方法無法傳遞，必須手動復制；refs無法傳遞。

反向繼承

下面的例子是最簡單的一個實現

export function hoc(ImportComponent) {
 return class Hoc extends ImportComponent {
 static displayName = `Hoc(${getDisplayName(ImportComponent)})`
 render() {
  return super.render()
 }
 }
}

作用： 操作state；渲染劫持（操作它的render函數）

注意事項：通過繼承ImportComponent，除了一些靜態方法，包括生命周期，state，各種function，我們都可以得到。

原則

1. 不要修改原組件，高階組件只是通過組合的方式將子組件包裝在容器組件中，是一個無副作用的純函數。

2. 不要在render方法內部使用高階組件。

3. 高階組件可以向組件添加功能，但是不應該大幅度地改變功能。

4. 為了方便調試，選擇一個顯示名稱，表示它是高階組件的結果。

讀到這里，這篇“React中如何使用高階組件”文章已經介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內容的文章，歡迎關注億速云行業資訊頻道。