高階組件（HOC）是 React 中用于復(fù)用組件邏輯的一種高級技巧魏滚。HOC 自身不是 React API 的一部分，它是一種基于 React 的組合特性而形成的設(shè)計模式。

高階函數(shù)與高階組件：

如果一個函數(shù) 接受一個或多個函數(shù)作為參數(shù)或者返回一個函數(shù) 就可稱之為 高階函數(shù)伯复。

function withGreeting(greeting = () => {}) {
    return greeting;
}

高階組件是參數(shù)為組件慨代，并且返回值為新組件的一類函數(shù)。
它們都是一個函數(shù)啸如。

function HigherOrderComponent(WrappedComponent) {
    return <WrappedComponent />;
}

當(dāng)高階組件中返回的組件是 無狀態(tài)組件(函數(shù)組件)時侍匙，該高階組件其實就是一個 高階函數(shù)，因為 無狀態(tài)組件 本身就是一個純函數(shù)组底。

React 中的高階組件主要有兩種形式：屬性代理 和 反向繼承丈积。

屬性代理（Props Proxy）：

簡單例子：

// 無狀態(tài)
function HigherOrderComponent(WrappedComponent) {
    return props => <WrappedComponent {...props} />;
}
// 有狀態(tài)
function HigherOrderComponent(WrappedComponent) {
    return class extends React.Component {
        render() {
            return <WrappedComponent {...this.props} />;
        }

    };
}

對于有狀態(tài)屬性代理組件來說筐骇，其實就是 一個函數(shù)接受一個 WrappedComponent 組件作為參數(shù)傳入债鸡，并返回一個繼承了 React.Component 組件的類，且在該類的 render() 方法中返回被傳入的 WrappedComponent 組件敷钾。

在有狀態(tài)的屬性代理高階組件中可以進(jìn)行一下操作：

• 操作 props
  為 WrappedComponent 添加新的屬性：

function HigherOrderComponent(WrappedComponent) {
    return class extends React.Component {
        render() {
            const newProps = {
                name: '天空明朗',
                age: 12,
            };
            return <WrappedComponent {...this.props} {...newProps} />;
        }
    };
}

• 抽離 state
  在返回組件中定義state和處理方法菌赖，通過props形式傳遞給參數(shù)組件维贺，將參數(shù)組件中的state抽離到返回組件中做處理。

function withOnChange(WrappedComponent) {
    return class extends React.Component {
        constructor(props) {
            super(props);
            this.state = {
                value: '',
            };
        }
        onChange = (e) => {
            let value = e.target.value;
            this.setState({
                vaule,
            });
        }
        render() {
            const newProps = {
                value: this.state.name,
                onChange: this.onChange,
            };
            return <WrappedComponent {...this.props} {...newProps} />;
        }
    };
}

const NameInput = props => (<input {...props.name} />);
export default withOnChange(NameInput);

這樣就將 input 轉(zhuǎn)化成受控組件了棺弊。

• 用其他元素包裹傳入的組件 WrappedComponent
  給 WrappedComponent 組件包一層背景色：

function withBackgroundColor(WrappedComponent) {
    return class extends React.Component {
        render() {
            return (
                <div style={{ backgroundColor: '#828282' }}>
                    <WrappedComponent {...this.props} />
                </div>
            );
        }
    };
}

反向繼承（Inheritance Inversion）:

簡單例子：

function HigherOrderComponent(WrappedComponent) {
    return class extends WrappedComponent {
        render() {
            return super.render();
        }
    };
}

反向繼承其實就是 一個函數(shù)接收一個 WrappedComponent 組件作為參數(shù)，并返回一個繼承了參數(shù) WrappedComponent 組件的類擒悬，且在該類的 render() 方法中返回 super.render() 方法模她。
屬性代理中繼承的是 React.Component，反向繼承中繼承的是傳入的組件 WrappedComponent懂牧。

反向代理可以進(jìn)行以下操作：

• 操作state
  可以拿到 props 和 state 添加額外的元素

function withLogging(WrappedComponent) {
    return class extends WrappedComponent {
        render() {
            return (
                <div>
                    <p>state:</p>
                    <pre>{JSON.stringify(this.state)}</pre>
                    <p>props:</p>
                    <pre>{JSON.stringify(this.props)}</pre>
                    {super.render()}
                </div>
            );
        }
    };
}

• 渲染劫持（Render Highjacking）
  條件渲染：通過 props.isLoading 這個條件來判斷渲染哪個組件侈净。

function withLoading(WrappedComponent) {
    return class extends WrappedComponent {
        render() {
            if(this.props.isLoading) {
                return <Loading />;
            } else {
                return super.render();
            }
        }
    };
}

高階組件存在的問題：

• 靜態(tài)方法丟失
  因為原始組件被包裹于一個容器組件內(nèi)，也就意味著新組件會沒有原始組件的任何靜態(tài)方法：

// 定義靜態(tài)方法
WrappedComponent.staticMethod = function() {}

// 使用高階組件

const EnhancedComponent = HigherOrderComponent(WrappedComponent);

// 增強(qiáng)型組件沒有靜態(tài)方法
typeof EnhancedComponent.staticMethod === 'undefined' // true

對靜態(tài)方法進(jìn)行拷貝：

function HigherOrderComponent(WrappedComponent) {
    class Enhance extends React.Component {}
    // 必須得知道要拷貝的方法
    Enhance.staticMethod = WrappedComponent.staticMethod;
    return Enhance;
}

但是這么做的一個缺點就是必須知道要拷貝的方法是什么僧凤，不過 React 社區(qū)實現(xiàn)了一個庫 hoist-non-react-statics 來自動處理畜侦，它會 自動拷貝所有非 React 的靜態(tài)方法：

import hoistNonReactStatic from 'hoist-non-react-statics';
function HigherOrderComponent(WrappedComponent) {
    class Enhance extends React.Component {}
    hoistNonReactStatic(Enhance, WrappedComponent);
    return Enhance;
}

• refs 屬性不能透傳
  一般來說高階組件可以傳遞所有的 props 給包裹的組件 WrappedComponent，但是有一種屬性不能傳遞躯保，它就是 ref旋膳。與其他屬性不同的地方在于 React 對其進(jìn)行了特殊的處理。
  如果你向一個由高階組件創(chuàng)建的組件的元素添加 ref 引用途事，那么 ref 指向的是最外層容器組件實例的验懊，而不是被包裹的 WrappedComponent 組件。
  可以通過React 16.3中的一個名為 React.forwardRef 的 API 來解決這一問題：

function withLogging(WrappedComponent) {
    class Enhance extends WrappedComponent {
        render() {
            const {forwardedRef, ...rest} = this.props;
            // 把 forwardedRef 賦值給 ref
            return <WrappedComponent {...rest} ref={forwardedRef} />;
        }
    };
    // React.forwardRef 方法會傳入 props 和 ref 兩個參數(shù)給其回調(diào)函數(shù)

    // 所以這邊的 ref 是由 React.forwardRef 提供的
    function forwardRef(props, ref) {
        return <Enhance {...props} forwardRef={ref} />
    }
    return React.forwardRef(forwardRef);
}

const EnhancedComponent = withLogging(SomeComponent);

• 反向繼承不能應(yīng)用于函數(shù)組件的解析
  反向繼承的渲染劫持可以控制 WrappedComponent 的渲染過程尸变，也就是說這個過程中我們可以對 elements tree义图、state、props 或 render() 的結(jié)果做各種操作振惰。但函數(shù)組件中不存在super.render()歌溉、state等功能。

高階組件的約定

• props 保持一致
  高階組件在為子組件添加特性的同時，要盡量保持原有組件的 props 不受影響痛垛，也就是說傳入的組件和返回的組件在 props 上盡量保持一致草慧。
• 你不能在函數(shù)式（無狀態(tài)）組件上使用 ref 屬性，因為它沒有實例
• 不要以任何方式改變原始組件 WrappedComponent

function withLogging(WrappedComponent) {
    WrappedComponent.prototype.componentWillReceiveProps = function(nextProps) {
        console.log('Current props', this.props);
        console.log('Next props', nextProps);
    }
    return WrappedComponent;
}

const EnhancedComponent = withLogging(SomeComponent);

會發(fā)現(xiàn)在高階組件的內(nèi)部對 WrappedComponent 進(jìn)行了修改匙头，一旦對原組件進(jìn)行了修改漫谷，那么就失去了組件復(fù)用的意義，所以請通過 純函數(shù)（相同的輸入總有相同的輸出） 返回新的組件

function withLogging(WrappedComponent) {
    return class extends React.Component {
        componentWillReceiveProps() {
            console.log('Current props', this.props);
            console.log('Next props', nextProps);
        }

        render() {
            // 透傳參數(shù)蹂析，不要修改它
            return <WrappedComponent {...this.props} />;
        }
    };
}

• 將返回組件接收的 props 給被包裹的組件 WrappedComponent

function HigherOrderComponent(WrappedComponent) {
    return class extends React.Component {
        render() {
            return <WrappedComponent name="name" {...this.props} />;
        }
    };
}

• 不要再 render() 方法中使用高階組件

class SomeComponent extends React.Component {
    render() {
        // 調(diào)用高階函數(shù)的時候每次都會返回一個新的組件
        const EnchancedComponent = enhance(WrappedComponent);
        // 每次 render 的時候舔示，都會使子對象樹完全被卸載和重新
        // 重新加載一個組件會引起原有組件的狀態(tài)和它的所有子組件丟失
        return <EnchancedComponent />;
    }
}

• 使用 compose 組合高階組件

// 不要這么使用
const EnhancedComponent = withRouter(connect(commentSelector)(WrappedComponent))；
// 可以使用一個 compose 函數(shù)組合這些高階組件
// lodash, redux, ramda 等第三方庫都提供了類似 `compose` 功能的函數(shù)
const enhance = compose(withRouter, connect(commentSelector))电抚；
const EnhancedComponent = enhance(WrappedComponent)惕稻；

因為按照 約定 實現(xiàn)的高階組件其實就是一個純函數(shù)，如果多個函數(shù)的參數(shù)一樣（在這里 withRouter 函數(shù)和 connect(commentSelector)所返回的函數(shù)所需的參數(shù)都是 WrappedComponent）蝙叛，所以就可以通過 compose 方法來組合這些函數(shù)俺祠。

高階組件的應(yīng)用場景：

• 權(quán)限控制：
  利用高階組件的 條件渲染 特性可以對頁面進(jìn)行權(quán)限控制，權(quán)限控制一般分為兩個維度：頁面級別 和 頁面元素級別借帘，這里以頁面級別來舉一個例子：

// HOC.js
function withAdminAuth(WrappedComponent) {
    return class extends React.Component {
        state = {
            isAdmin: false,
        }
        async componentWillMount() {
            const currentRole = await getCurrentUserRole();
            this.setState({
                isAdmin: currentRole === 'Admin',
            });
        }

        render() {
           if (this.state.isAdmin) {
                return <WrappedComponent {...this.props} />;
            } else {
                return (<div>您沒有權(quán)限查看該頁面蜘渣，請聯(lián)系管理員！</div>);
            }
        }
    };
}

然后是兩個頁面：

// pages/page-a.js
class PageA extends React.Component {
    constructor(props) {
        super(props);
        // something here...
    }
    componentWillMount() {
        // fetching data
    }
    render() {
        // render page with data
    }
}
export default withAdminAuth(PageA);

// pages/page-b.js
class PageB extends React.Component {
    constructor(props) {
        super(props);
        // something here...
    }
    componentWillMount() {
        // fetching data
    }
    render() {
        // render page with data
    }
}
export default withAdminAuth(PageB);

使用高階組件對代碼進(jìn)行復(fù)用之后肺然，可以非常方便的進(jìn)行拓展蔫缸，比如產(chǎn)品經(jīng)理說，PageC 頁面也要有 Admin 權(quán)限才能進(jìn)入际起，我們只需要在 pages/page-c.js 中把返回的 PageC 嵌套一層 withAdminAuth 高階組件就行拾碌，就像這樣 withAdminAuth(PageC)。是不是非常完美加叁！非常高效＞氩住！但是它匕。展融。第二天產(chǎn)品經(jīng)理又說，PageC 頁面只要 VIP 權(quán)限就可以訪問了豫柬。你三下五除二實現(xiàn)了一個高階組件 withVIPAuth告希。

其實你還可以更高效的，就是在高階組件之上再抽象一層烧给，無需實現(xiàn)各種 withXXXAuth 高階組件燕偶，因為這些高階組件本身代碼就是高度相似的，所以我們要做的就是實現(xiàn)一個 返回高階組件的函數(shù)础嫡，把 變的部分（Admin指么、VIP） 抽離出來酝惧，保留 不變的部分，具體實現(xiàn)如下：

// HOC.js
const withAuth = role => WrappedComponent => {
    return class extends React.Component {
        state = {
            permission: false,
        }
        async componentWillMount() {
            const currentRole = await getCurrentUserRole();
            this.setState({
                permission: currentRole === role,
            });
        }

        render() {
            if (this.state.permission) {
                return <WrappedComponent {...this.props} />;
            } else {
                return (<div>您沒有權(quán)限查看該頁面伯诬，請聯(lián)系管理員晚唇！</div>);
            }
        }
    };
}
withAuth(‘Admin’)(PageA);

有沒有發(fā)現(xiàn)和 react-redux 的 connect 方法的使用方式非常像？沒錯盗似，connect 其實也是一個 返回高階組件的函數(shù)哩陕。

• 頁面復(fù)用
  假設(shè)我們有兩個頁面 pageA 和 pageB 分別渲染兩個分類的電影列表，普通寫法可能是這樣：

// pages/page-a.js
class PageA extends React.Component {
    state = {
        movies: [],
    }
    // ...
    async componentWillMount() {
        const movies = await fetchMoviesByType('science-fiction');
        this.setState({
            movies,
        });
    }
    render() {
        return <MovieList movies={this.state.movies} />
    }
}
export default PageA;

// pages/page-b.js
class PageB extends React.Component {
    state = {
        movies: [],
    }
    // ...
    async componentWillMount() {
        const movies = await fetchMoviesByType('action');
        this.setState({
            movies,

        });
    }
    render() {
        return <MovieList movies={this.state.movies} />
    }
}
export default PageB;

頁面少的時候可能沒什么問題赫舒，但是假如隨著業(yè)務(wù)的進(jìn)展悍及，需要上線的越來越多類型的電影，就會寫很多的重復(fù)代碼接癌，所以我們需要重構(gòu)一下：

const withFetching = fetching => WrappedComponent => {
    return class extends React.Component {
        state = {
            data: [],
        }
        async componentWillMount() {
            const data = await fetching();
            this.setState({
                data,
            });
        }
        render() {
        return <WrappedComponent data={this.state.data} {...this.props} />;
        }
    }
}

// pages/page-a.js
export default withFetching(fetching('science-fiction'))(MovieList);

// pages/page-b.js
export default withFetching(fetching('action'))(MovieList);

// pages/page-other.js
export default withFetching(fetching('some-other-type'))(MovieList);

會發(fā)現(xiàn) withFetching 其實和前面的 withAuth 函數(shù)類似心赶，把 變的部分（fetching(type)） 抽離到外部傳入，從而實現(xiàn)頁面的復(fù)用扔涧。

裝飾器模式：

高階組件其實就是裝飾器模式在 React 中的實現(xiàn)：通過給函數(shù)傳入一個組件（函數(shù)或類）后在函數(shù)內(nèi)部對該組件（函數(shù)或類）進(jìn)行功能的增強(qiáng)（不修改傳入?yún)?shù)的前提下）园担，最后返回這個組件（函數(shù)或類）届谈，即允許向一個現(xiàn)有的組件添加新的功能枯夜，同時又不去修改該組件，屬于 包裝模式(Wrapper Pattern) 的一種艰山。

什么是裝飾者模式：在不改變對象自身的前提下在程序運行期間動態(tài)的給對象添加一些額外的屬性或行為湖雹。

相比于使用繼承，裝飾者模式是一種更輕便靈活的做法曙搬。

總結(jié)：

• 高階組件不是組件摔吏，是一個把某個組件轉(zhuǎn)換成另一個組件的函數(shù)
• 高階組件的主要作用是代碼復(fù)用
• 高階組件是裝飾器模式在React中的實現(xiàn)

參考鏈接：React 中的高階組件及其應(yīng)用場景