Skip to content

高阶组件(HOC)

什么是高阶组件

高阶组件就是一个函数,传给它一个组件,它返回一个新的组件

jsx
const NewComponent = higherOrderComponent(OldComponent);

注意,高阶组件就是一个函数(而不是组件),它接受一个组件作为参数,返回一个新的组件。这个新的组件会使用你传给它的组件作为子组件,我们看看一个很简单的高阶组件:

jsx
import React, { Component } from 'react';

export default (WrappedComponent) => {
    const Wrap = () => {
        return <WrappedComponent />;
    };
    return <Wrap />;
};

高接组件的作用是为了组件之间重复代码的复用。组件可能存在某些相同的逻辑,把这些逻辑抽离出来,放到高阶组件进行复用。新的组件和传入的组件通过 props 传递信息