一、建立元件
es6 class建立的元件語法更加簡明，也更符合j**ascript。內部的方法不需要使用function關鍵字。
react.createclass
import react from 'react';
const mycomponent = react.createclass(
});export default mycomponent;
react.component(es6)
import react, from 'react';
class mycomponent extends component
}export default mycomponent;
二、屬性
props proptypes and getdefaultprops
. 使用react.component建立元件，需要通過在constructor中呼叫super()將props傳遞給react.component。另外react 0.13之後props必須是不可變的。
. 由於是用es6 class語法建立元件，其內部只允許定義方法，而不能定義屬性，class的屬性只能定義在class之外。所以proptypes要寫在元件外部。
. 對於之前的getdefaultprops方法，由於props不可變，所以現在被定義為乙個屬性，和proptypes一樣，要定義在class外部。
react.createclass
import react from 'react';
const mycomponent = react.createclass(,
getdefaultprops() ;
}, render: function()
});export default mycomponent;
react.component(es6)
import react, from 'react';
class mycomponent extends component
render()
}mycomponent.proptypes = ;
mycomponent.defaultprops = ;
export default mycomponent;
三、狀態
. 使用es6 class語法建立元件，初始化state的工作要在constructor中完成。不需要再呼叫getinitialstate方法。這種語法更加的符合j**ascript語言習慣。
react
import react from 'react';
const mycomponent = react.createclass(;
}, render: function()
});export default mycomponent;
react.component(es6)
import react, from 'react';
class mycomponent extends component ; }
render()
}export default mycomponent;
四、this
. 使用es6 class語法建立元件， class中的方法不會自動將this繫結到例項中。必須使用.bind(this)或者 箭頭函式 ＝>來進行手動繫結。
react.createclass
import react from 'react';
const mycomponent = react.createclass(,
render: function()
});export default mycomponent;
react.component(es6)
import react, from 'react';
class mycomponent extends component
render()
}export default mycomponent;
也可以將繫結方法寫到constructor中：
import react, from 'react';
class mycomponent extends component
handleclick()
render()
}export default mycomponent;
或者使用箭頭函式 => ：
import react, from 'react';
class mycomponent extends component
render()
}export default mycomponent;
五、mixins
. 使用es6語法來建立元件是不支援react mixins的，如果一定要使用react mixins就只能使用react.createclass方法來建立元件了。
import react, from 'react';
var setintervalmixin = ,
};const contacts = react.createclass(,
render()
});export default contacts;
總結本文標題: 利用es6語法重構react元件詳解
本文位址:
React中的es6語法
在今年對 instagram web 進行全新的設計的時候，我喜歡在寫 react 元件的時候，用上一些 es6 的新特性。請允許我列舉這些能夠改變你寫 react 應用方式的新特性。比起以往，這些特性能夠使你擼起碼來更加容易 有趣！使用 es6 來編寫 react 元件最明顯的變化就是我們定義元件...
重構之路 webpack配置es6語法
之前已經寫好了最簡單的乙個webpack配置，並且已經可以執行js了，但是，新時代的前端肯定要寫es6啊，但是我們在index.js裡寫上es6的語法時，比如 使用es6裡的set和擴充套件運算子來實現陣列去重 varset new set 1 2,2 3,3 4,4 5,5 console.log...
React裡用到的ES6語法
箭頭函式相當於匿名函式，簡化了函式的定義 格式 單條語句 可以省略 和return eg x x x 單個引數 x，y x y 多個函式 x 返回物件 在物件外面有個 多條語句 不能省略 和return this的指向 不用箭頭函式，this指向window或者undefined 用箭頭函式，thi...