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。