数据属性

数据属性有四个特性：

1. configurable: 属性是否可删除、重新定义

2. enumerable: 属性是否可枚举

3. writable: 属性值是否可修改

4. value: 属性值

访问器属性

1. configurable: 属性是否可删除、重新定义

2. enumerable: 属性是否可枚举

3. get: 读取属性调用

4. set: 设置属性调用

　　Object.defineProperty(obj,prop,descriptor)的三个参数是定义属性的对象、属性名和描述符，描述符本身也是Object，其中的属性就是数据属性或者访问器属性规定的参数，举个栗子：

var person = {};
Object.defineProperty(person,'name',{
    configurable: true,enumerable: true,writable: true,value: 'wang'
});
console.log(person.name);//wang

了解了Object.defineProperty,我们分别看下面向于类(class)的@decorator和面向于方法(function)的@decorator。

面向方法的@decorator

　　class语法其实仅仅只是ES6的一个语法糖而已，class其实质是function。并且class中的内部方法会通过Object.defineProperty定义到function.prototype，例如:

class Person {
  speak () {
    console.log('I am Person!') 
  }
}

会被Babel转成：

function Person(){}

Object.defineProperty(Person.prototype,'speak',{
  value: function () { 'I am Person!' },enumerable: false,configurable: true,writable: true
})

　　Decorator函数接受的参数与Object.defineProperty类似，与对类(class)的方法使用@decorator，接受到的方法分别是类的prototype，内部方法名和描述符，@decorator会在调用Object.defineProperty前劫持，先调用Decorator函数，将返回的descriptor定义到类的prototype上。
　　例如:

function readonly(target,key,descriptor) {
  //可以通过修改descriptor参数实现各种功能
  descriptor.writable = false
  return descriptor
}

class Person {
  @readonly
  speak () {
    return 'I am Person!'
  }
}

const person = new Person();
person.speak = ()=>{
    console.log('I am human')
}

面向类的@decorator

　　当我们对一个class使用@decorator时，接受到的参数target是类本身。例如:
　　

function name (target) {
  target.name = 'wang'
}

@name
class Person {}

console.log(Dog.name)
//'wang'

　　讲完了@decorator，现在让我们回到JSX中，react-mixin和 core-decorators两个库都提供了mixin函数可用。大致让我们看一下core-decorators库中mixin的大致代码:

function handleClass(target,mixins) {
  if (!mixins.length) {
    throw new SyntaxError(`@mixin() class ${target.name} requires at least one mixin as an argument`);
  }

  for (let i = 0,l = mixins.length; i < l; i++) {
    const descs = getOwnPropertyDescriptors(mixins[i]);
    const keys = getOwnKeys(descs);

    for (let j = 0,k = keys.length; j < k; j++) {
      const key = keys[j];

      if (!(hasProperty(key,target.prototype))) {
        defineProperty(target.prototype,descs[key]);
      }
    }
  }
}

export default function mixin(...mixins) {
  if (typeof mixins[0] === 'function') {
    return handleClass(mixins[0],[]);
  } else {
    return target => {
      return handleClass(target,mixins);
    };
  }
}

@mixin使用如下:

import { mixin } from 'core-decorators';

const SingerMixin = {
  sing(sound) {
    alert(sound);
  }
};

const FlyMixin = {
  fly() {},land() {}
};

@mixin(SingerMixin,FlyMixin)
class Bird {
  singMatingCall() {
    this.sing('tweet tweet');
  }
}

var bird = new Bird();
bird.singMatingCall();

　　我们可以看到mixin函数相当于采用Currying的方式接受mixins数组，返回

return target => {
      return handleClass(target,mixins);
};

而handleClass函数的大致作用就是采用defineProperty将mixins数组中的函数定义在target.prototype上，这样就实现了mixin的要求。

Mixin在React中的作用

　　讲了这么多Mixin的东西，那么Mixin在React中有什么作用呢？Mixin的作用无非就是在多个组件中共享相同的方法，实现复用，React中的Mixin也是相同的。比如你的组件中可能有共同的工具方法，为了避免在每个组件中都有相同的定义，你就可以采用Mixin。下面依旧举一个现实的例子。
　　React的性能优化一个非常常见的方法就是减少组件不必要的render,一般我们可以在生命周期shouldComponentUpdate(nextProps,nextState)中进行判断，通过判断nextProps和nextState与this.pros和this.state是否完全相同(浅比较)，如果相同则返回false，表示不重新渲染，如果不相同，则返回true，使得组件重新渲染(当然你也可以不使用mixin，而使用React.PureComponent也可以达到相同的效果)。并且现在有非常多的现成的库提供如上的功能，例如react-addons-pure-render-mixin中提供了PureRenderMixin方法，首先我们可以在项目下运行:

npm install --save react-addons-pure-render-mixin;

然后在代码中可以如下使用

import PureRenderMixin from 'react-addons-pure-render-mixin';
import {decorate as mixin} from 'react-mixin'
@mixin(PureRenderMixin)
class FooComponent extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return <div className={this.props.className}>foo</div>;
  }
}

当然你也可以这样写：

var PureRenderMixin = require('react-addons-pure-render-mixin');
React.createClass({
  mixins: [PureRenderMixin],render: function() {
    return <div className={this.props.className}>foo</div>;
  }
});

甚至这样写:

import PureRenderMixin from 'react-addons-pure-render-mixin';
class FooComponent extends React.Component {
  constructor(props) {
    super(props);
    this.shouldComponentUpdate = PureRenderMixin.shouldComponentUpdate.bind(this);
  }

  render() {
    return <div className={this.props.className}>foo</div>;
  }
}

　　因为@decorator是ES7的用法，所以必须使用Babel才能使用，所以我们需要在.babelrc文件中设置:

{
  "presets": ["es2015","stage-1"],"plugins": [
    "babel-plugin-transform-decorators-legacy"
  ]
}

并安装插件：

npm i babel-cli babel-preset-es2015 babel-preset-stage-1 babel-plugin-transform-decorators

　　之后我们就可以尽情体验ES7的decorator了！