通常你會(huì)將一個(gè)React組件定義為一個(gè)普通的JavaScript類：

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

如果您還沒(méi)有使用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()為傳遞對(duì)象的函數(shù)：

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

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

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

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

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

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

自動(dòng)綁定

在聲明為ES6類的React組件中，方法遵循與常規(guī)ES6類相同的語(yǔ)義。這意味著它們不會(huì)自動(dòng)綁定this到實(shí)例。您必須.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()這個(gè)，沒(méi)有必要，因?yàn)樗壎怂械姆椒ǎ?/p>

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)用程序中，性能稍好一些。

如果樣板代碼對(duì)您來(lái)說(shuō)太不吸引人，您可以使用Babel 啟用實(shí)驗(yàn)性的“ 類屬性”語(yǔ)法提議：

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>    );  }}

請(qǐng)注意，上面的語(yǔ)法是實(shí)驗(yàn)性的，語(yǔ)法可能會(huì)更改，或者提案可能不會(huì)將其添加到語(yǔ)言中。

如果你想安全地玩，你有幾個(gè)選擇：

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

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

• 繼續(xù)使用createReactClass。

混入

注意：   ES6沒(méi)有任何mixin支持。因此，當(dāng)您使用ES6類的React時(shí)，不支持mixin。  我們?cè)谑褂胢ixins的代碼庫(kù)中也發(fā)現(xiàn)了很多問(wèn)題， 并且不建議在新代碼中使用它們。  本部分僅供參考。

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

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

如果一個(gè)組件使用多個(gè)mixin，并且多個(gè)mixin定義了相同的生命周期方法（即當(dāng)組件被銷毀時(shí)，多個(gè)mixin想要做一些清理），所有的生命周期方法都會(huì)被保證調(diào)用。列出在mixin中以mixin順序運(yùn)行的方法，然后列出組件上的方法調(diào)用。