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();
        }
    }
}
复制代码

转载于:https://juejin.im/post/5aa4d989f265da23906ba2b0