React+ES6的语法坑

• 组件定义
• propTypes and getDefaultProps
• getInitialState
• this
• Mixins

组件定义

最早的时候我们使用 React.createClass 来进行组建的构建。

import React from 'react';

const Contacts = React.createClass({  
  render() {
    return (
      <div></div>
    );
  }
});

export default Contacts;

现在我们可以用ES6中的继承 extend 来写。

import React from 'react';

class Contacts extends React.Component {  
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <div></div>
    );
  }
}

export default Contacts;

propTypes and getDefaultProps

这里有很多重要的变化包括默认属性，设置初试状态。在 React.createClass 中，我们可以通过propTypes 来定义属性，通过 getDefaultProps 来返回我们需要默认设置的值。

import React from 'react';

const Contacts = React.createClass({  
  propTypes: {

  },
  getDefaultProps() {
    return {

    };
  },
  render() {
    return (
      <div></div>
    );
  }
});

export default Contacts;

而使用React.Component则可以使用 propTypes 作为一个类的基本属性，这样的改变更加有助于清晰的API设计，同样的设置默认值也变成了一个属性 defaultProps.

import React from 'react';

class Contacts extends React.Component {  
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <div></div>
    );
  }
}
Contacts.propTypes = {

};
Contacts.defaultProps = {

};

export default Contacts;

getInitialState

在老版本的react中我们通过使用 getInitialState 来设置一些初试状态。
而在使用新的继承来做的话，我们可以直接在 constructor 中来进行赋值声明。

import React from 'react';

class Contacts extends React.Component {  
  constructor(props) {
    super(props);
    this.state = {

    };
  }
  render() {
    return (
      <div></div>
    );
  }
}

export default Contacts;

this

使用 React.createClass会正确的自动绑定this到当前执行的函数中去。但是这个在ES6中会有些不一样。我们需要在contructor中执行bind函数或者使用ES6箭头函数。

import React from 'react';

class Contacts extends React.Component {  
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
  }
  handleClick() {
    console.log(this); // React Component instance
  }
  render() {
    return (
      <div onClick={this.handleClick}></div>
    );
  }
}

export default Contacts;

Mixins

在老版本中我们可以这样使用 mixins ，

import React from 'react';

var SomeMixin = {  
  doSomething() {

  }
};
const Contacts = React.createClass({  
  mixins: [SomeMixin],
  handleClick() {
    this.doSomething(); // use mixin
  },
  render() {
    return (
      <div onClick={this.handleClick}></div>
    );
  }
});

export default Contacts;

而在使用ES6创建类的时候，不再支持 minxins。