通常你會將一個React組件定義為一個普通的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類的API類似于createReactClass()少數(shù)例外。

聲明默認(rèn)道具

使用函數(shù)和ES6類defaultProps定義為組件本身的屬性：

class Greeting extends React.Component {  // ...}Greeting.defaultProps = {
  name: 'Mary'};

與createReactClass()，你需要定義getDefaultProps()為傳遞對象的函數(shù)：

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

設(shè)置初始狀態(tài)

在ES6類中，你可以通過this.state在構(gòu)造函數(shù)中賦值來定義初始狀態(tài)：

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

與createReactClass()，你必須提供一個單獨的getInitialState方法，返回初始狀態(tài)：

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

自動綁定

在聲明為ES6類的React組件中，方法遵循與常規(guī)ES6類相同的語義。這意味著它們不會自動綁定this到實例。您必須.bind(this)在構(gòu)造函數(shù)中明確使用：

class SayHello extends React.Component {  constructor(props) {    super(props);    
    this.state = {message: 'Hello!'};    
    // This line is important!    
    this.handleClick = this.handleClick.bind(this);  }  handleClick() {    alert(this.state.message);  }  
    render() {    
    // Because `this.handleClick` is bound, we can use it as an event handler.    
    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類為事件處理程序提供了更多樣板代碼，但是在大型應(yīng)用程序中，性能稍好一些。

如果樣板代碼對您來說太不吸引人，您可以使用Babel 啟用實驗性的“ 類屬性”語法提議：

class SayHello extends React.Component {  constructor(props) {    super(props);    this.state = {message: 'Hello!'};  }  
// WARNING: this syntax is experimental!  
// Using an arrow here binds the method:  handleClick = () => {    alert(this.state.message);  }  render() {    
    return (      <button onClick={this.handleClick}>
        Say hello      </button>    );  }}

請注意，上面的語法是實驗性的，語法可能會更改，或者提案可能不會將其添加到語言中。

如果你想安全地玩，你有幾個選擇：

• 在構(gòu)造函數(shù)中綁定方法。

• 使用箭頭功能，例如onClick={(e) => this.handleClick(e)}。

• 繼續(xù)使用createReactClass。

混入

注意：   ES6沒有任何mixin支持。因此，當(dāng)您使用ES6類的React時，不支持mixin。  我們在使用mixins的代碼庫中也發(fā)現(xiàn)了很多問題， 并且不建議在新代碼中使用它們。  本部分僅供參考。

有時候，非常不同的組件可能會共享一些通用功能 這些有時被稱為交叉擔(dān)憂。createReactClass可以讓您使用舊mixins系統(tǒng)。

一個常見的用例是想要在一段時間間隔內(nèi)自行更新的組件。它很容易使用setInterval()，但是當(dāng)你不再需要它來節(jié)省內(nèi)存時，取消間隔很重要。React提供了生命周期方法，可以讓您知道組件即將創(chuàng)建或銷毀的時間。讓我們創(chuàng)建一個簡單的混合使用這些方法來提供一個簡單的setInterval()函數(shù)，當(dāng)你的組件被銷毀時它會自動清理。

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定義了相同的生命周期方法（即當(dāng)組件被銷毀時，多個mixin想要做一些清理），所有的生命周期方法都會被保證調(diào)用。列出在mixin中以mixin順序運行的方法，然后列出組件上的方法調(diào)用。