ES5下的React

按照官方推荐的思路，React使用标准的ES6标准的语法。比如说创建一个类：

class Greeting extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

但是ES5依然深入人心。用的是React.creatCalss();方法。

    var Greeting=React.createClass({
        render:function(){
          return (
            <h1>Hello,{this.props.name}</h1>
          );
        }
      });

二者是如此的相似，但是还是有若干差别。现将官网内容翻译如下，相信无论是ES5或是ES6的使用者，都会有所裨益。

propTypes和defaultProps的声明方式

在ES6的语法下，propTypes和defaultProps是以属性的形式定义（类似写一个原生对象的属性）：

class Greeting extends React.Component {
  // ...
}

Greeting.propTypes = {
  name: React.PropTypes.string//定义为属性的数据类型
};

Greeting.defaultProps = {
  name: 'Mary'//定义属性内容
};

但是你用React.creatClass(),它的参数是一个类似json的对象，所以应该这么写：

var Greeting = React.createClass({
  propTypes: {
    name: React.PropTypes.string
  },

  getDefaultProps: function() {
    return {
      name: 'Mary'
    };
  },

  // ...
});

设置初始状态：

ES6的初始状态可以使用constructor函数：

class Counter extends React.Component {
  constructor(props) {
    super(props);//绑定
    this.state = {count: props.initialCount};
  }
  // ...
}

但是如果你使用ES5，操作应该是setInitialState方法,props都得有this：

React.createClass({
    getInitialState:function(){
        return {
            count:this.props.initialCount
        };
    }
});

自动绑定

在Es6声明的React组件中，方法都符合ES6类的规则，这意味着它不会自动绑定this关键字。因此你需要在constructor函数的方法加.bind(this)。

class SayHello extends React.Component {
  constructor(props) {
    super(props);
    this.state = {message: 'Hello!'};
    // 关键语句！
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    alert(this.state.message);
  }

  render() {
    // 由于 `this.handleClick` 已经被绑定, 所以可以作为事件处理方法了！
    return (
      <button onClick={this.handleClick}>
        Say hello
      </button>
    );
  }
}

而在ES5语法下，就不必绑定了，因为它给所有的方法都绑定了this：

var SayHello = React.createClass({
  getInitialState: function() {
    return {message: 'Hello!'};
  },

  handleClick: function() {
    alert(this.state.message);
  },

  render: function() {
    return (
      <button onClick={this.handleClick}>
        Say hello
      </button>
    );
  }
});

注：类似定时器，函数套函数这样的方法，this指向window，还是需要注意一下。

尽管ES6的this弄起来比较麻烦，但对于大型应用构建时，这是一个明显的优势——this就不容易出错。

当然，如果你实在是不爽那些冗余bind(this)，可以采用Babel语法——Class Properties ，也不必写在constructor函数里面了。

  // 注意，此语法还不成熟！
  // 用箭头绑定方法的this
  handleClick = () => {
    alert(this.state.message);
  }

以后有可能不支持这种写法。

如果你想百分百安全，省的去维护，可以：

• 继续使用React.createClass();
• 老老实实地把方法写在constructor函数里面，再绑定this;
• 在渲染中使用箭头函数, e比如：onClick={(e) => this.handleClick(e)}

Mixins

ES6运行不支持任何mixin，所以，放弃吧。

同时，在codebase使用mixin，已经发现相当多的问题。因此不建议在新的代码中使用mixin。

有时候会遇到多个组件共享一个方法的情况(术语叫横切关注点)，React.createClass允许你使用mixins机制。

最常见的情况是一个组件想通过定时器更新自身的状态，定时器setInteval用起来是非常容易，但是一旦你不用，记得关掉它节省内存。React的生命周期方法可以让你知道组件何时生成和销毁。现在基于生命周期的方法创建一个简单的mixin：

当你的定时器组件销毁时，自动清理掉它：

// 通用的定时器功能。
var SetIntervalMixin = {
  componentWillMount: function() {
    this.intervals = [];
  },
  setInterval: function() {
    this.intervals.push(setInterval.apply(null, arguments));
  },
  componentWillUnmount: function() {
    this.intervals.forEach(clearInterval);
  }
};

var TickTock = React.createClass({
  mixins: [SetIntervalMixin], // Use the mixin
  getInitialState: function() {
    return {seconds: 0};
  },
  componentDidMount: function() {
    this.setInterval(this.tick, 1000); // Call a method on the mixin
  },
  tick: function() {
    this.setState({seconds: this.state.seconds + 1});
  },
  render: function() {
    return (
      <p>
        React has been running for {this.state.seconds} seconds.
      </p>
    );
  }
});