定义

高阶组件（Higher Order Components, HOC）: 通过它，将一个组件包装成另一个组件

const EnhancedComponent = higherOrderComponent(WrappedComponent);

两种HOC方式

wrap方法

如下：将 Pagination 进行一层 wrap，为了与 rd 接口对接上，同时去掉自动计算"多余"的 totalPage

function myPagination(Pagination) {
    return class MyPagination extends React.Component {

        render() {
            const {pageNum, pageSize, total, children, ...rest} = this.props
            return (
                <Pagination
                    currentPage={parseInt(pageNum, 10)}
                    currentLine={parseInt(pageSize, 10)}
                    totalNumber={parseInt(total, 10)}
                    totalPage={Math.ceil(parseInt(total, 10) / parseInt(pageSize, 10))}
                    {...rest}
                >
                    {children}
                </Pagination>
            )
        }
    }
}

倒转继承方法

如下，可以用于包装 style/useable 的 api，而且对外无影响（除了静态方法）

function styleUseable(WrappedComponent) {
    return class Enhancer extends componentClass {
        componentWillMount(...args) {
            styleInstance.use && styleInstance.use();
            if (super.componentWillMount) {
                super.componentWillMount.apply(this, args)
            }
        }

        componentWillUnmount(...args) {
            styleInstance.unuse && styleInstance.unuse();
            if (super.componentWillUnmount) {
                super.componentWillUnmount.apply(this, args)
            }
        }
    }
}

实践

React-Editable: 可视化编辑 React 数据