装饰器

配置装饰器语法环境

第一步：yarn add @babel/plugin-proposal-decorators 用于解析装饰器语法。
第二步：在项目根目录下创建 config-overrides.js，配置一个loader——addDecoratorsLegacy。

module.exports = override(
	addDecoratorsLegacy()
)

第三步：在项目根目录下创建 jsconfig.json，追加一个配置："experimentalDecorators":true。

{
  "compilerOptions": {
    "experimentalDecorators":true,
    "baseUrl": "./",
    "paths": {
        "@/*": ["src/*"]
    }
  },
  "exclude": ["node_modules", "dist"]
}

装饰器语法的三种情况

第一种：

装饰器函数没有 return ( return 不是 undefined,因为没有 return ，必须程序员手写 return ，才有return )

//这是一个装饰器函数：
function demo(target) {
	target.a = 1
	target.b = 2
}

使用装饰器语法，代码如下:

@demo
class MyClass {}

console.dir(MyClass)：

上方的装饰器语法，会被翻译为如下代码：

class MyClass {}
demo(MyClass) 

第二种：

装饰器函数有返回值
例1：

//这是一个装饰器函数：
function demo(target) {
	target.a = 1
	target.b = 2
	return 100
}

使用装饰器语法，代码如下:

@demo
class MyClass {}

console.log ( MyClass ) :

例2：

//这是一个装饰器函数：
unction demo(target) {
  let obj = {name:'lisi',age:19}
	target.a = 1
	target.b = 2
	return {...obj,...target}
}

使用装饰器语法，代码如下:

@demo
class MyClass {}

console.log ( MyClass ) :

上方的装饰器语法，会被翻译为如下代码：

class MyClass {}
MyClass = demo(MyClass) 

第三种：

装饰器函数是另外一个函数的返回值

//这是一个装饰器函数：
function test(){
	function demo(target) {
		target.a = 1
		target.b = 2
		return target
	}
	return demo
}

使用装饰器语法，代码如下:

@test()
class MyClass {}

上方的装饰器语法，会被翻译为如下代码：

class MyClass {}
MyClass = test()(MyClass)

用装饰器语法的场景

react-redux 中的 connect()函数，相当于一个装饰器函数（第三种情况）

使用装饰器语法之前：

import {connect} from 'react-redux'
import React, { Component } from 'react'

class Count extends Component {}

export default connect(
  state => ({ }),
  { }
)(Count)

使用装饰器语法之后：

import {connect} from 'react-redux'
import React, { Component } from 'react'

@connect(
	state => ({ }),
	{ }
)

class Count extends Component {}

export default Count  // Count = connect()(Count)