React中的es6語法

在今年對 instagram web 進行全新的設計的時候，我喜歡在寫 react 元件的時候，用上一些 es6+ 的新特性。請允許我列舉這些能夠改變你寫 react 應用方式的新特性。比起以往，這些特性能夠使你擼起碼來更加容易、有趣！

使用 es6+ 來編寫 react 元件最明顯的變化就是我們定義元件（類）的語法的方式。我們可以用定義乙個繼承了react.component的es6 類來代替原本使用react.createclass的來建立類的方式：

class
photo
extends
react.component
/>;
}}

我們可以發現這種寫法使得定義元件的方式變得更加簡潔：

// the es5 way
varphoto = react.createclass(,
render: function() ,
});// the es6+ way
class
photo
extends
react.component
render() 
}

這樣我們可以少寫一對圓括號、乙個分號、每個方法的冒號和function關鍵字。

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

// the es5 way
varembedmodal = react.createclass(,
});// the es6+ way
class
embedmodal
extends
react.component
}

在 es6+ 類中，屬性型別prop type和預設屬性default prop可以通過類中的static來宣告。同時，元件的初始狀態（initial state）可以通過 es7 的屬性初始化（property initializers）來完成：

// the es5 way
varvideo = react.createclass(;
},getinitialstate: function() ;
},proptypes: ,
});// the es6+ way
class
video
extends
react.component
static proptypes = 
state = 
}

es7 中在建構函式（constructor）下的屬性初始化操作中的this指向的是類的例項，所以初始狀態（initial state）可以通過this.prop（即傳入的引數）來設定。

react.createclass方法在你的元件上做了一些額外的繫結工作，以確保在元件例項項的方法內部，this指向的是元件例項自身。

// autobinding, brought to you by react.createclass
var postinfo = react.createclass();
},});

由於我們使用 es6+ 的語法定義類的時候沒有採用react.createclass的方式，所以，這樣看來我們不得不手動來繫結這些方法中this的指向：

// manually bind, wherever you need to
class
postinfo
extends
react.component
handleoptionsbuttonclick(e) );
}}

幸運的是，通過 es6+ 的箭頭函式（ arrow functions ）和屬性初始化（ property initializers ）這兩個特性使得把函式的this指向繫結為元件的例項變得非常的簡單：

class
postinfo
extends
react.component
);  }
}

函式體內的this物件，繫結定義時所在的物件，而不是使用時所在的物件。而恰好屬性初始化（ property initializers ）剛好在這個作用域內。

在 es6+ 中對物件字面量的擴充套件使得我們可以在物件字面量中使用表示式來對屬性命名。如果是在 es5 中，我們也許只能這樣做：

var form = react.createclass(;
statetoset[inputname + 'value'] = e.target.value;
this.setstate(statetoset);
},});

但是，在 es6+ 中，我們不僅可以在物件字面量屬性的定義中使用表示式，還有使用使用字串模板：

class
form
extends
react.component
value`]: e.target.value,
});}}

我們在編寫元件的過程中，經常遇到要從父元件要把自己的很多屬性多傳給子元件的情況。有了 es6+ 的析構和擴充套件運算子特性，這變得非常的方便：

class
autoloadingpostsgrid
extends
react.component
= this.props;
return (
this.handleloadmoreclick}>load more
);}}

我們可以把擴充套件運算子屬性和普通的屬性結合起來使用，這樣使得我們可以利用優先順序來使用屬性的預設值和屬性的覆蓋。下面這個元素會獲得乙個override的類（class），及時this.props中有傳遞classname屬性。

classname="override">
…div>

下面這種寫法，可以給元素設定預設的classname：

classname="base"
>
…div>

我希望你能夠享受 es6+ 的這些特性給你在編寫 react.js 中帶來的好處。感謝我的同事他們為這篇文章作出的貢獻，還有，特別的感謝 babel 團隊，使得我們可以隨意的使用這些特性。

React中的es6語法

React裡用到的ES6語法

es6中reduce的用法 Es6基礎語法

利用ES6語法重構React元件詳解

React中的es6語法

React裡用到的ES6語法

es6中reduce的用法 Es6基礎語法

利用ES6語法重構React元件詳解

相關推薦