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中怎么使用高階組件有進一步的了解嗎？如果還想了解更多知識或者相關內容，請關注億速云行業資訊頻道，感謝大家的支持。