這次帶給大家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，我們都可以得到。
原則
不要修改原始元件，高階元件只是透過組合的方式將子元件包裝在容器元件中，是無副作用的純函數。
不要在render方法內部使用高階元件。
高階元件可以為元件新增功能，但不應該大幅改變功能。
為了方便偵錯，選擇顯示名稱，表示它是高階元件的結果。
相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！
推薦閱讀：
如何操作JS實作html中placeholder屬性提示文字
以上是React高階組件使用詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！
