React Without ES6

    如果你不使用ES6，你可以使用来定义:

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

    除了部分特性，ES6中类的API非常类似于函数React.createClass

    在函数和class类中,propTypes和defaultProps被定义为组件内部的属性:

    1. class Greeting extends React.Component {
    2.   // ...
    3. }
    5. Greeting.propTypes = {
    6.   name: React.PropTypes.string
    7. };
    9. Greeting.defaultProps = {
    10.   name: 'Mary'
    11. };

    在React.createClass()函数中,你需要在所传递的对象中定义propTypes属性和getDefaultProps()方法:

    在ES6类中，你可以在构造函数通过给this.state辅助定义初始状态:

    1. class Counter extends React.Component {
    2.   constructor(props) {
    3.     super(props);
    4.   }
    5.   // ...
    6. }

    在React.createClass()函数中，你可以使用getInitialState方法返回初始状态:

    1. var Counter = React.createClass({
    2.   getInitialState: function() {
    3.     return {count: this.props.initialCount};
    4.   },
    5.   // ...
    6. });

    在React.createClass()方式中，并不需要这么做，因为方法可以自动绑定。

    1. var SayHello = React.createClass({
    2.   getInitialState: function() {
    3.     return {message: 'Hello!'};
    4.   },
    6.   handleClick: function() {
    7.     alert(this.state.message);
    8.   },
    10.   render: function() {
    11.     return (
    12.       <button onClick={this.handleClick}>
    13.         Say hello
    15.   }
    16. });

    这意味着在使用ES6 class方式下对于事件处理函数你需要编写更多的样本代码,但是在大型应用中具有更好的性能。

    如果你不想使用样本代码，你可以使用Babel中实验性*的

    1. class SayHello extends React.Component {
    2.   constructor(props) {
    3.     super(props);
    4.     this.state = {message: 'Hello!'};
    5.   }
    6.   // WARNING: this syntax is experimental!
    7.   // Using an arrow here binds the method:
    8.   handleClick = () => {
    9.     alert(this.state.message);
    10.   }
    12.   render() {
    13.     return (
    14.       <button onClick={this.handleClick}>
    15.         Say hello
    16.       </button>
    17.     );
    18.   }
    19. }

    请注意，上述语法是实验性的，可能将来会发生改变，或者这个提案可能不会纳入语言范畴。

    如果你想更稳妥的方法，你有一下的选择：

    • 在构造函数中绑定方法
    • 使用箭头函数 onClick={(e) => this.handleClick(e)}.

    有时不同的组件可能会共用部分方法，这些方法会被称为横切关注点(cross-cutting concerns)

    可以允许你使用mixins。

    一个常见的使用场景是组件间隔一段时间自我更新。使用setInterval()很容易实现，但是为了节省内存空间必须在不使用时取消。React提供了生命周期方法,可以通知你组件创建和销毁。我们编写一个简单的mixin，执行方法可以提供方法，并且在组件销毁时可以自动被清除。

    如果一个组件使用多个mixin，不同的mixin中定义了相同的生命周期方法(例如，不容的mixin中都想要在组件销毁时做相应的清理)，这些生命周期函数都会被调用。在组件内部的生命周期方法执行完毕后，mixin中的方法将会按照mixin的顺序依次执行。