React 高阶组件-蒲公英云

React 高阶组件

定义

高阶组件（High Order Component, HOC）输入：React 组件 => 输出：React 组件

使用场景

高阶组件的作用主要是用来加强组件，通过把基础组件拆分成很小的粒度，通过高阶组件进行增强并返回，以此提高复用性。比如需要开发一个消息框，一开始只需要一个模态框能够显示消息就可以。后来需要多增加『确定』『取消』按钮组，这时候只要用高阶组件进行一次对基础模态框的增强就可以。避免了对原有组件进行修改，不影响原有组件的调用方。

实现思路

Props Proxy 属性代理
Inheritance Inversion 反向继承

Props Proxy 属性代理

核心思想是返回一个全新的组件，并在新组件中使用基础组件，方法是：

增删改 props

组合其他组件

const BasicComponent = require(‘BasicComponent’);
const Button = require(‘Button’);
const React = require(‘react’);

const buttonWrapperHOC = (params) => {

return class HOCBasicComponent extend React.Component {
    render() {
        return (
            <div>
                <BasicComponent/>
                <div className='button-wrapper'>
                    <Button value='确定'/>
                    <Button value='取消'/>
                </div>
            </div>      
        );
    }
}

}

复制代码

Inheritance Inversion 反向继承

核心思想是返回一个继承了基础组件的组件

之所以被称为 Inheritance Inversion 是因为 WrappedComponent 被 Enhancer 继承了，而不是 WrappedComponent 继承了 Enhancer。在这种方式中，它们的关系看上去被反转（inverse）了。

可以进新的操作

增删改 props
修改render输出的DOM树（改起来不是很方便）

const BasicComponent = require(‘BasicComponent’);
const Button = require(‘Button’);
const React = require(‘react’);

const HOC = (params) => {
```
return class HOCBasicComponent extend BasicComponent {
    render() {
        return super.render();
    }
}
```
}
复制代码