装饰器+HOC(高阶组件)简单使用

装饰器+HOC(高阶组件)简单使用
这里不会过多的详细介绍HOC和装饰器的概念，而是简单叙述实际开发场景中是一个demo来作为使用参考。

高阶组件
简单来说，高阶组件是一个函数，能够接受一个组件并返回一个新的组件。
组件是将 props 转化成 UI ，然而 高阶组件将一个组价转化成另外一个组件。

React在第三方组件库中非常常见，例如Redux的connect

装饰器
ES7中的一种语法糖，与Python中的装饰器使用及作用类似，其实就是以一种更为简洁的方式来来包装修改类的行为。装饰对象包括：类、类的属性、类的方法。

注意：装饰器只能用于类和类的方法，不能用于函数，因此在使用函数式组件时不能使用，只能用于类组件

vscode编辑器配置（新特性会有异常提示）
Settings --> Workspace --> 搜索experimentalDecorators 勾选该选项，即设置为true
项目中使用
由于属于新特性，如果在项目中使用需要使用babel来进行转码。

安装babel插件:

Babel >= 7.x

npm install --save-dev @babel/plugin-proposal-decorators
1
Babel@6.x

npm install --save-dev babel-plugin-transform-decorators-legacy
1
.babelrc 配置：

Babel >= 7.x

{
    "plugins": [
        ["@babel/plugin-proposal-decorators", { "legacy": true }],
    ]
}

Babel@6.x

{
    "plugins": [
        "transform-decorators-legacy"
    ]
}

Demo
要做的Demo很简单，为已有的Demo组件外层包裹一层div,以及添加一个title标题

HOC

//addDiv.js

import React, {Component} from 'react';

const addDiv = (title) => (WrappedComponent) => class extends Component {
    render() {
        return (
            <div>
                <h1>{title}</h1>
                <hr/>
                <WrappedComponent/>>
            </div>
        )
    }
};

export default addDiv;

利用装饰器使用HOC

//demo.js

import React, {Component} from 'react';
import addDiv from './addDiv.js';

@addDiv('标题')
export default class Demo extends Component {
    ...
    render() {
        return(
            <i>demo</i>
        )
    }
}
————————————————
版权声明：本文为CSDN博主「衣乌安、」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/zSY_snake/article/details/95483449