React和ES6（二）ES6的類和ES7的property initializer

React與ES6系列：

<a href="http://www.cnblogs.com/sunshine-anycall/p/5888181.html">React與ES6（一）開篇介紹</a>

<a href="http://www.cnblogs.com/sunshine-anycall/p/5888190.html">React和ES6（二）ES6的類和ES7的property initializer</a>

<a href="http://www.cnblogs.com/sunshine-anycall/p/5888242.html">React與ES6（三）ES6類和方法綁定</a>

<a href="http://www.cnblogs.com/sunshine-anycall/p/5888288.html">React與ES6（四）ES6如何處理React mixins</a>

前一篇的内容太簡單了，會不會很失望。這次就來一個接近實際應用的例子，對應的React的元件也會更加複雜。這次開發一個購物車的頁面。在這個頁面中你會看到某個産品的資訊，比如：圖檔、名稱和價格。另外，一個使用者可以增加和減少該商品的數量。

我們使用了一個CDN來引用樣式。添加個樣式美化一下這個小應用的内容。<code>dev.root</code>會用來展示React元件生成的内容。

現在開發<code>Cart</code>元件。建立檔案<code>cart.jsx</code>。

cart.jsx作為購物車功能的總容器。這裡引入了<code>react</code>和<code>react-dom</code>。之後引入了<code>CartItem</code>元件，這個元件會在稍後給出定義。最後，在<code>ReactDom.render</code>方法中把<code>CartItem</code>元件展示在<code>class</code>等于root的HTML元素中。

<code>CartItem</code>元件中的title、image、initialQty和price都是<code>props</code>的值。這些值會在後面<code>CartItem</code>元件的定義中用到。<code>props</code>是元件給子元件傳遞資料的一種方式。

現在應該給出<code>CartItem</code>的定義了。否則整個web app都無法正常運作。<code>CartItem</code>元件可以展示資料，也可以相應使用者的增加、減少操作。

下面解釋一下：

<code>constructor</code>是ES6中類的構造函數。整個構造函數需要一個參數<code>props</code>，其全部的值都在上文的代碼中給出：title、image等。需要注意的是在構造函數中第一個調用的是<code>super(props)</code>。<code>this.state = ...</code>一句中，使用<code>props</code>初始化了整個元件的state初值。

·componentWillMount()<code>方法是元件的生命周期方法之一。在元件即将在HTML頁面中繪制的時候調用。在</code>componentWillMount()<code>中使用方法</code>recalculateTotal()`計算了商品的總價。

這些是增加、減少商品數量的方法。這些方法在使用者點選了增加、減少按鈕之後被調用。在這些方法中，更新了<code>state</code>中物品數量的值，并在<code>setState</code>方法的回調中使用了<code>recalculateTotal()</code>方法。

上一節沒有給出<code>render</code>方法的具體實作，這裡給出：

在<code>render()</code>方法中，我們使用了JSX文法添加了各種“HTML”節點。這些節點和HTML标簽很像，但是并不是HTML元素。

不用擔心<code>this.decreaseQty.bind(this)</code>之類的用法。這些會在下一篇裡詳細解釋。

假設我們現在需要給<code>CartItem</code>添加一些預設的props，并可以自動檢查props的類型。

幸好這些在React裡都有内置支援。是以，相關代碼非常少。

在<code>CartItem</code>類定義的下面直接添加下面的代碼：

```js

CartItem.propTypes = {

title: React.PropTypes.string.isRequired,

price: React.PropTypes.number.isRequired,

initialQty: React.PropTypes.number

};

CartItem.defaultProps = {

title: "Indefined Product",

price: 100,

initialQty: 0

};``<code>這時候如果你在*cart.jsx*檔案中給</code>CartItem`的title值為數值的話，你就會在浏覽器中看到警告。

你可能要問了ES6還沒整明白的就開始用上ES7了？我要說的是我們往前看，使用一些已經在靜态語言裡有的特性并不會造成太大的問題。最關鍵的問題是<code>Babel</code>已經支援了。

首先安裝必要的<code>Babel</code>子產品：<code>npm install --save-dev babel-preset-stage-0</code>。

然後在.babelrc檔案中添加這個preset的配置：

在<code>CartItem</code>類裡，添加如下代碼：

這樣的定義和前面一節在類定義後面再定義default props和props types是一樣的效果。但是這樣的定義是不是更加的接近靜态語言類中定義屬性的方式呢？當然之前的default props和props types的定義也可以删去了。

最後一步就是把initial state（state初始值）從constructor裡拿出來放到property initializer（屬性初始化器）裡。代碼如下：

記得把原來constructor裡的state代碼删了。

通過這篇你就可以熟悉了如何用ES6寫React的元件，也熟悉了如何使用ES7的property initializer。

歡迎加群互相學習，共同進步。QQ群：iOS: 58099570 | Android: 572064792 | Nodejs：329118122 做人要厚道，轉載請注明出處！

本文轉自張昺華-sky部落格園部落格，原文連結：http://www.cnblogs.com/sunshine-anycall/p/5888190.html，如需轉載請自行聯系原作者