是什么

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

為什么用

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

如何用

//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方法內部使用高階組件。 高階組件可以向組件添加功能，但是不應該大幅度地改變功能。 為了方便調試，選擇一個顯示名稱，表示它是高階組件的結果。

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持錯新站長站。