React.js in es6

React.js 在 v0.13.0 版之後開始支援 ES6 的語法，如果想學習 ES6 語法的人可以看一下這些教學

• ECMAScript 6入门
• Learn ES6

對於最新 ES6 的 React.js 寫法，一個最基本的範例就是建立一個 Component

React Component

以往 ES5 我們會利用類似如下的寫法來建立一個 Component

首先在 ES5 我們會用 require 來引入你需要的模組，再來利用 React.createClass 建立一個 Component

最後透過 module.exports 來 export 一個 Component

至於要如何用 ES6 的語法建立一個 React 的 Component 呢?　如下：

我們可以看到原本的 require 換成了 import {} from "" 而 module.exports 換成了 export default

最重要的是，利用了 ES6 定義的 class 來達到基本的 prototype-based 的 object oriented pattern

所以在 ES6 語法中我們就可以把一個 React 的 Component 透過 class 的定義並繼承 React.Component 來建立一個 Component 的類別

當然大多數 React 所定義的方法都沒有變動，包括 render, componentWillMount, componentDidMount...等等

Prop & PropTypes

接下來我們的 Component 建議最好要定義 props 的型態和預設值，React 會幫你驗證

如果有型態錯誤，會在 console 印出警告。在 ES5 的語法中，我們是這樣寫的

至於在 ES6 中，我們會這樣定義：

個人是認為 ES6 的語法透過 class 的定義方式會稍為簡單明瞭 :)

State

在 ES5 的寫法中，我們會定義 getInitialState 來初始化 Component 的 state 物件，如下所示：

至於在 ES6 的語法中，可以在 constructor (類似Java的建構子) 中透過 this.state 直接定義 state 的物件

Instance method

這裡所謂的 instance method，就是在描述 component 觸發事件 callback function 中，this 的問題，例如 click

這在 ES5 中是沒有這樣的問題的，例如：

但是在 ES6 的寫法中，我們必須在 callback function 後面加上 .bind(this)，否則 this 會是觸發事件的那個物件

也可以像以下的方式也是可行的：



結論

其實利用 ES6 來撰寫 React，改動老實說沒有很大，但你可以多加利用 ES6 的新語法來完成一些新的 JS 特性

並透過類別繼承的方式讓 Component 更能達到 reusable 以及 maintainable

另外值得一提的就是 mixin 在 ES6 的語法中並不支援，但是目前網路上有一些人貢獻一些方式可以達成

但這都不是官方所釋放出來的解決方案，所以這點需要多加考慮

至於要如何將 ES6 的語法轉譯成 ES5，你可以用 babel 或是 traceur 來完成

babel 的話，之前有寫過一個簡單的範例，可以參考>>範例<<