摘要：如果是在中，我們也許只能這樣做但是，在中，我們不僅可以在對(duì)象字面量屬性的定義中使用表達(dá)式，還有使用使用字符串模板析構(gòu)擴(kuò)展運(yùn)算符我們?cè)诰帉懡M件的過程中，經(jīng)常遇到要從父組件要把自己的很多屬性多傳給子組件的情況。

原文地址： http://babeljs.io/blog/2015/06/07/react-on-es6-plus/

在今年對(duì) Instagram Web 進(jìn)行全新的設(shè)計(jì)的時(shí)候，我喜歡在寫 React 組件的時(shí)候，用上一些 ES6+ 的新特性。請(qǐng)?jiān)试S我列舉這些能夠改變你寫 React 應(yīng)用方式的新特性。比起以往，這些特性能夠使你擼起碼來更加容易、有趣！

使用 ES6+ 來編寫 React 組件最明顯的變化就是我們定義組件（類）的語(yǔ)法的方式。我們可以用定義一個(gè)繼承了 React.Component 的ES6 類來代替原本使用 React.createClass 的來創(chuàng)建類的方式：

class Photo extends React.Component {
  render() {
    return ;
  }
}

我們可以發(fā)現(xiàn)這種寫法使得定義組件的方式變得更加簡(jiǎn)潔：

// The ES5 way
var Photo = React.createClass({
  handleDoubleTap: function(e) { … },
  render: function() { … },
});
// The ES6+ way
class Photo extends React.Component {
  handleDoubleTap(e) { … }
  render() { … }
}

這樣我們可以少寫一對(duì)圓括號(hào)、一個(gè)分號(hào)、每個(gè)方法的冒號(hào)和 function 關(guān)鍵字。

所有生命周期方法都可以采用這種方式來定義。 但是 componentWillMount 還可以用 constructor 來代替：

// The ES5 way
var EmbedModal = React.createClass({
  componentWillMount: function() { … },
});
// The ES6+ way
class EmbedModal extends React.Component {
  constructor(props) {
    super(props);
    // Operations usually carried out in componentWillMount go here
  }
}

在 ES6+ 類中，屬性類型 prop type 和默認(rèn)屬性 default prop 可以通過類中的 static 來聲明。同時(shí)，組件的初始狀態(tài)（ initial state ）可以通過 ES7 的屬性初始化（property initializers）來完成：

// The ES5 way
var Video = React.createClass({
  getDefaultProps: function() {
    return {
      autoPlay: false,
      maxLoops: 10,
    };
  },
  getInitialState: function() {
    return {
      loopsRemaining: this.props.maxLoops,
    };
  },
  propTypes: {
    autoPlay: React.PropTypes.bool.isRequired,
    maxLoops: React.PropTypes.number.isRequired,
    posterFrameSrc: React.PropTypes.string.isRequired,
    videoSrc: React.PropTypes.string.isRequired,
  },
});
// The ES6+ way
class Video extends React.Component {
  static defaultProps = {
    autoPlay: false,
    maxLoops: 10,
  }
  static propTypes = {
    autoPlay: React.PropTypes.bool.isRequired,
    maxLoops: React.PropTypes.number.isRequired,
    posterFrameSrc: React.PropTypes.string.isRequired,
    videoSrc: React.PropTypes.string.isRequired,
  }
  state = {
    loopsRemaining: this.props.maxLoops,
  }
}

ES7 中在構(gòu)造函數(shù)（ constructor ）下的屬性初始化操作中的 this 指向的是類的實(shí)例，所以初始狀態(tài)（ initial state ）可以通過 this.prop （即傳入的參數(shù)）來設(shè)定。

React.createClass 方法在你的組件上做了一些額外的綁定工作，以確保在組件實(shí)實(shí)例的方法內(nèi)部， this 指向的是組件實(shí)例自身。

// Autobinding, brought to you by React.createClass
var PostInfo = React.createClass({
  handleOptionsButtonClick: function(e) {
    // Here, "this" refers to the component instance.
    this.setState({showOptionsModal: true});
  },
});

由于我們使用 ES6+ 的語(yǔ)法定義類的時(shí)候沒有采用 React.createClass 的方式，所以，這樣看來我們不得不手動(dòng)來綁定這些方法中 this 的指向：

// Manually bind, wherever you need to
class PostInfo extends React.Component {
  constructor(props) {
    super(props);
    // Manually bind this method to the component instance...
    this.handleOptionsButtonClick = this.handleOptionsButtonClick.bind(this);
  }
  handleOptionsButtonClick(e) {
    // ...to ensure that "this" refers to the component instance here.
    this.setState({showOptionsModal: true});
  }
}

幸運(yùn)的是，通過 ES6+ 的箭頭函數(shù)（ Arrow functions ）和屬性初始化（ property initializers ）這兩個(gè)特性使得把函數(shù)的 this 指向綁定為組件的實(shí)例變得非常的簡(jiǎn)單：

class PostInfo extends React.Component {
  handleOptionsButtonClick = (e) => {
    this.setState({showOptionsModal: true});
  }
}

函數(shù)體內(nèi)的 this 對(duì)象，綁定定義時(shí)所在的對(duì)象，而不是使用時(shí)所在的對(duì)象。而恰好屬性初始化（ property initializers ）剛好在這個(gè)作用域內(nèi)。

在 ES6+ 中對(duì) 對(duì)象字面量的擴(kuò)展 使得我們可以在對(duì)象字面量中使用表達(dá)式來對(duì)屬性命名。如果是在 ES5 中，我們也許只能這樣做：

var Form = React.createClass({
  onChange: function(inputName, e) {
    var stateToSet = {};
    stateToSet[inputName + "Value"] = e.target.value;
    this.setState(stateToSet);
  },
});

但是，在 ES6+ 中，我們不僅可以在對(duì)象字面量屬性的定義中使用表達(dá)式，還有使用使用 字符串模板 ：

class Form extends React.Component {
  onChange(inputName, e) {
    this.setState({
      [`${inputName}Value`]: e.target.value,
    });
  }
}

我們?cè)诰帉懡M件的過程中，經(jīng)常遇到要從父組件要把自己的很多屬性多傳給子組件的情況。有了 ES6+ 的 析構(gòu) 和 擴(kuò)展運(yùn)算符 特性，這變得非常的方便：

class AutoloadingPostsGrid extends React.Component {
  render() {
    var {
      className,
      ...others,  // contains all properties of this.props except for className
    } = this.props;
    return (
      

        
        Load more
      
    );
  }
}

我們可以把 擴(kuò)展運(yùn)算符 屬性和普通的屬性結(jié)合起來使用，這樣使得我們可以利用優(yōu)先級(jí)來使用屬性的默認(rèn)值和屬性的覆蓋。下面這個(gè)元素會(huì)獲得一個(gè) override 的類（ class ），及時(shí) this.props 中有傳遞 className 屬性。

  …

下面這種寫法，可以給元素設(shè)定默認(rèn)的 className：

  …

我希望你能夠享受 ES6+ 的這些特性給你在編寫 React.js 中帶來的好處。感謝我的同事他們?yōu)檫@篇文章作出的貢獻(xiàn)，還有，特別的感謝 Babel 團(tuán)隊(duì)，使得我們可以隨意的使用這些特性。

文章地址：http://blog.mcbird.cn/2015/09/11/react-on-es6-plus/