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. 為了方便偵錯，選擇顯示名稱，表示它是高階元件的結果。

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

如何操作JS實作html中placeholder屬性提示文字

如何使用JS倒數恢復按鈕點擊功能

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