不使用 ES6

通常情况下你可以用普通的 JavaScript 类定义一个组件:

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

如果你不使用 ES6 ，你可以使用 create-react-class 方法代替：

var createReactClass = require('create-react-class');
var Greeting = createReactClass({
  render: function() {
    return <h1>Hello, {this.props.name}</h1>;
  }
});

除了一些例外，ES6 classes(类) API 非常类似于函数 createReactClass() 。

声明默认 Props

在函数和 ES6 classes(类) 中，defaultProps 被定义为组件本身的属性：

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

Greeting.defaultProps = {
  name: 'Mary'
};

在 createReactClass() 中，你需要在所传递的对象中定义 getDefaultProps() 方法:

var Greeting = createReactClass({
  getDefaultProps: function() {
    return {
      name: 'Mary'
    };
  },

  // ...

});

设置初始化 State(状态)

在 ES6 classes(类) 中，你可以在构造函数通过给 this.state 赋值来定义初始状态:

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

在 createReactClass() 函数中，你可以提供一个指定的 getInitialState 方法来返回初始状态:

var Counter = createReactClass({
  getInitialState: function() {
    return {count: this.props.initialCount};
  },
  // ...
});

自动绑定

在以 ES6 classes(类) 方式声明的 React 组件中，方法遵循与普通 ES6 的 class 中相同的语义。也就是说方法不会自动绑定 this 到实例中，你必须在构造函数中显式的使用 .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>
    );
  }
}

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

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

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

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

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

如果你不想使用样本代码，你可以使用 Babel 启用 实验性的类属性语法提案：

class SayHello extends React.Component {
  constructor(props) {
    super(props);
    this.state = {message: 'Hello!'};
  }
  // 警告：这个语法是实验性的！
  // 这里使用箭头绑定方法：
  handleClick = () => {
    alert(this.state.message);
  }

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

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

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

在构造函数中绑定方法。
使用箭头函数，例如，onClick={(e) => this.handleClick(e)}。
保持使用 createReactClass。

Mixins

注意：

ES6 是不支持 mixin 的，因此，当你用 ES6 classes(类)编写 React 时是不支持 mixins 的。

我们也在使用 mixins 的情况下发现了部分问题，所以我们不推荐目前使用。

以下部分仅用来参考。

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

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

var SetIntervalMixin = {
  componentWillMount: function() {
    this.intervals = [];
  },
  setInterval: function() {
    this.intervals.push(setInterval.apply(null, arguments));
  },
  componentWillUnmount: function() {
    this.intervals.forEach(clearInterval);
  }
};

var createReactClass = require('create-react-class');

var TickTock = createReactClass({
  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>
    );
  }
});

ReactDOM.render(
  <TickTock />,
  document.getElementById('example')
);

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

Edit this page