初步理解React高阶组织

前言

由于初学React，对前端各框架也没有深入的了解，所以理解React官网中对高阶组织的文档很困难，通过学习网上很对大佬的博客，对高阶组件写下一点自己浅显的理解，勿喷！

什么是高阶组件

高阶组件（HOC）是 React 中用于复用组件逻辑的一种高级技巧。HOC 自身不是 React API 的一部分，它是一种基于 React 的组合特性而形成的设计模式（React官网）。

为什么要用高阶组件

React 不推荐使用mixins用于解决切面问题，高阶组织类似于Spring中AOP功能，或者说是装饰器模式，在React中能很好的解决切面问题。

高阶组件能用来干什么

• 代码复用，抽象逻辑
• 渲染劫持
• State 抽象和更改
• Props更改

---

下面例子介绍了代码复用和渲染劫持的功能

---

HOC组件实现

HOC 接收一个组件作为参数，并返回一个被 增强 的新组件。

import React, {Component} from "react";

export default (WrappedComponent) => {
    return class AbstractComponent extends Component {
        constructor(props) {
            super(props)
            this.state = {}
        }

        render() {
        	// 代码复用
            return (<div id={this.props.id}} onClick={this.props.onClick}>
            		// Props Proxy (PP)
                    <WrappedComponent {...this.props}/>
                    // 或 React.createElement(WrappedComponent, this.props, null)
                </g>
            )
        }
    }
}

原始组件实现

方式一

import React from 'react';
import HOC from './HOC'

@HOC
class youComponent extends React.Component {
    render() {
        return <div>......<div>
    }
}

export default youComponent;

方式二

import React from 'react';
import HOC from './HOC'

class youComponent extends React.Component {
    render() {
        return <div>......<div>
    }
}

export default HOC(youComponent);