装饰器介绍，react使用装饰器

前言

Decorator 是 ES7 的一个新语法，目前仍处于第2阶段提案中，正如其“装饰器”的叫法所表达的，他通过添加@方法名可以对一些对象进行装饰包装然后返回一个被包装过的对象，可以装饰的对象包括：类，属性，方法等。

在使用它之前需要引入babel模块 编译成 ES5 或 ES6。

1. 类的装饰

当装饰的对象是类时，我们操作的就是这个类本身，即装饰器函数的第一个参数，就是所要装饰的目标类。

@decorator
class A {}

// 等同于
class A {}
A = decorator(A) || A;

示例：添加一个日志装饰器

@log
class MyClass {
	toDo(){
		//do some
	}
}

function log(target) { // 这个 target 在这里就是 MyClass 这个类
   target.prototype.logger = () => `${target.name} 被调用`
}

const myClass = new MyClass()
test.toDo()

由于装饰器是表达式，我们也可以在装饰器后面再添加个参数：

@log('hi')
class MyClass { }

function log(text) {
  return function(target) {
    target.prototype.logger = () => `${text}，${target.name} 被调用`
  }
}

const test = new MyClass()
test.logger() // hello，MyClass 被调用

2. 属性或方法的装饰

对于类属性或方法的装饰本质是操作其描述符，可以把此时的装饰器理解成是 Object.defineProperty(obj, prop, descriptor)的语法糖。

class C {
  @readonly(false)
  method() { console.log('cat') }
}

function readonly(value) {
  return function (target, key, descriptor) { 
	/**
	* 此处 target 为 C.prototype; 
	* key 为 method;
    * 原 descriptor 为：{ value: f, enumarable: false, writable: true, configurable: true }
	*/
    descriptor.writable = value
    return descriptor
  }
}
const c = new C()
c.method = () => console.log('dog')
c.method() // cat

在react中使用装饰器 关于babel安装

Babel >= 7.x

npm install --save-dev @babel/plugin-proposal-decorators

Babel = 7.x的安装使用过程

安装转换器

npm install --save-dev @babel/plugin-proposal-decorators

暴露配置文件

npm run eject

配置package.json中的plugins（未暴露配置文件不能查看）

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

使用装饰器

TestView.jsx

import React from 'react'
const setTitle = (title) => (WrappedComponent) => {
    return class extends React.Component {
        render() {
            return 
                {title}
                
            

        }
    }
}
@setTitle('零三')
class TestView extends React.Component {
    render() {
        return 
            web03.cn
        
    }
}
export default TestView

结果