摘要：組建屬性初始化默認(rèn)值類型在中將下面的代碼替換成下面的代碼最后一步將初始狀態(tài)從構(gòu)造函數(shù)中轉(zhuǎn)變成屬性初始化。在構(gòu)造函數(shù)的后天添加正確的代碼你需要把狀態(tài)初始化代碼從構(gòu)造函數(shù)中刪除。

這是React和ECMAScript6結(jié)合使用系列文章的第二篇。

下面是所有系列文章章節(jié)的鏈接：

React 、 ES6 - 介紹（第一部分）

React類、ES7屬性初始化（第二部分）

React類，方法綁定（第三部分）

ES6中React Mixins的使用（第四部分）

React 和ES6 之JSPM的使用（第五部分）

React 和 ES6 工作流之 Webpack的使用（第六部分）

本篇文章Github源碼

在第一篇文章中，我們開始介紹如何使用ES6來創(chuàng)建靜態(tài)的組建并且輸出Hello from ES6. Not so exciting :)

在這篇文章中，我們將創(chuàng)建一個(gè)名字叫做CartItem的更復(fù)雜的組建。它將輸出購物車中的一些產(chǎn)品信息，包括圖片、標(biāo)題和價(jià)格。

此外，用戶可以和CartItem組建交互，通過點(diǎn)擊增加或者減少改變items的數(shù)量。并且我們的組建將對交互后的總價(jià)格做出動(dòng)態(tài)改變。

最后的項(xiàng)目效果圖:

讓我們來創(chuàng)建一個(gè)簡單的html模版文件。

注意我們已經(jīng)通過cdn添加了Foundation CSS框架服務(wù).它可以讓我們微應(yīng)用看起來很漂亮。同時(shí)，class為root的div將是我們應(yīng)用加載的地方。

創(chuàng)建gulpfile.js文件，拷貝下面的代碼到gulpfile.js文件中。

var gulp = require("gulp");
var browserify = require("browserify");
var babelify = require("babelify");
var source = require("vinyl-source-stream");

gulp.task("build", function () {
    return browserify({entries: "./app.jsx", extensions: [".jsx"], debug: true})
        .transform("babelify", {presets: ["es2015", "react"]})
        .bundle()
        .on("error", function(err) { console.error(err); this.emit("end"); })
        .pipe(source("bundle.js"))
        .pipe(gulp.dest("dist"));
});

gulp.task("watch", ["build"], function () {
    gulp.watch("*.jsx", ["build"]);
});

gulp.task("default", ["watch"]);

創(chuàng)建一個(gè)空文件夾，切換到這個(gè)文件夾中，在終端輸入npm init初始化你的package.json。

運(yùn)行npm install --save react react-dom,這將安裝react和react-dom到你的node_modules文件夾并且作為依賴庫保存到package.json文件中。

運(yùn)行npm install --save-dev gulp browserify babelify vinyl-source-stream babel-preset-es2015 babel-preset-react,這將安裝更多的依賴到你的node_modules文件夾。

創(chuàng)建app.jsx:

import React from "react";
import ReactDOM from "react-dom";
import CartItem from "./cartItem";

const order = {
    title: "Fresh fruits package",
    image: "http://images.all-free-download.com/images/graphiclarge/citrus_fruit_184416.jpg",
    initialQty: 3,
    price: 8
};

ReactDOM.render(
    ,
    document.querySelector(".root")
);

上面的代碼做了什么：

Lines 1-2. 我們導(dǎo)入 React / ReactDOM 庫。

Line 3. 導(dǎo)入我們馬上要?jiǎng)?chuàng)建的CartItem組建。

Lines 5-10. 給CartItem組建設(shè)置相關(guān)屬性(屬性包括 item title, image, initial quantity and price).

Lines 12-18. 加載CartItem組建到一個(gè)CSS類為root的DOM元素上。

現(xiàn)在是創(chuàng)建負(fù)責(zé)顯示項(xiàng)目的數(shù)據(jù)以及與用戶的交互組件的時(shí)候了。

添加下面的代碼到cartItem.jsx文件中：

import React from "react";

export default class CartItem extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            qty: props.initialQty,
            total: 0
        };
    }
    componentWillMount() {
        this.recalculateTotal();
    }
    increaseQty() {
        this.setState({qty: this.state.qty + 1}, this.recalculateTotal);
    }
    decreaseQty() {
        let newQty = this.state.qty > 0 ? this.state.qty - 1 : 0;
        this.setState({qty: newQty}, this.recalculateTotal);
    }
    recalculateTotal() {
        this.setState({total: this.state.qty * this.props.price});
    }
}

代碼解釋：

Lines 4-10. 這是ES6中React類的構(gòu)造函數(shù)。super(props)這句代碼是先處理父類的props，這句代碼必不可少。下面的狀態(tài)機(jī)變量的設(shè)置相當(dāng)于ES5中getInitialState()方法狀態(tài)機(jī)變量的初始化，我們通過this.state來給狀態(tài)機(jī)變量設(shè)置初始值。個(gè)人意見，我比較喜歡ES6中構(gòu)造函數(shù)的寫法。

Lines 11-13. componentWillMount()是生命周期中的方法，在這個(gè)方法里面我們通過recalculateTotal()方法對總價(jià)格做了計(jì)算。

Lines 14-20. 給用戶提供增加和減少的交互方法。當(dāng)用戶點(diǎn)擊相應(yīng)的按鈕(如前面的效果圖所示)時(shí)，這兩個(gè)方法會(huì)被調(diào)用。

在CartItem類中添加新的方法：

export default class CartItem extends React.Component {

    // previous code we wrote here

    render() {
        return (
          

              

                  

                      
                  
                  
              
              
Quantity: {this.state.qty}

              

                  +
                  -
              

              
Price per item: ${this.props.price}

              

                  Total: ${this.state.total}
              

          
        )
    }
}

這里我們只是使用JSX+組建，再加上一些基礎(chǔ)的CSS輸出漂亮的標(biāo)簽。

不要擔(dān)心{this.increaseQty.bind(this)}這句代碼的使用，下一小結(jié)中我們將會(huì)詳細(xì)講解，現(xiàn)在你需要相信我，這句代碼會(huì)調(diào)用CartItem類中的increaseQty()方法即可。

因此，到現(xiàn)在我們已經(jīng)有了和用戶交互的漂亮的應(yīng)用了，它向我們展示了如何使用ECMAScript6來編寫React 組建。就我個(gè)人而言，我很喜歡ES6帶來的新的語法。

到現(xiàn)在我們還沒有完成。在完成這篇文章之前，我們將再看看ES6中其它的一些新的特性。

想象我們想要為CartItem組建添加一些驗(yàn)證和默認(rèn)值。

幸運(yùn)的是，你只需要在CartItem類中添加如下代碼即可。

static get defaultProps() {
    return {
      title: "Undefined Product",
      price: 100,
      initialQty: 0
    }
}


static propTypes = {
  title: React.PropTypes.string.isRequired,
  price: React.PropTypes.number.isRequired,
  initialQty: React.PropTypes.number
}

PS: 也可以將上面的代碼刪除，在cartItem里面非CartItem類的內(nèi)部添加如下代碼：

CartItem.defaultProps = {
    title: "Undefined Product",
    price: 100,
    initialQty: 0
}

CartItem.propTypes = {
    title: React.PropTypes.string.isRequired,
    price: React.PropTypes.number.isRequired,
    initialQty: React.PropTypes.number
}

就我個(gè)人而言，比較喜歡第一種寫法，它不會(huì)破壞類的封裝性。

添加上面的代碼后，如果你給title屬性添加numeric類型的值，將在控制臺(tái)出現(xiàn)警告，這就是React屬性驗(yàn)證的功能。

你可能會(huì)問一個(gè)合理的問題，為什么ES6還沒有定稿，在你的標(biāo)題中為什么出現(xiàn)ES7呢？

我會(huì)告訴你，讓我們展望未來。我們開始使用non-breaking、property initializers和decorators的新特性。

即使ES7還處于非常早期的階段，在Babel中已經(jīng)實(shí)現(xiàn)了部分的建議性的新特性。這些實(shí)驗(yàn)性的新特性是從ES5到ES7令人驚嘆的新的特性的轉(zhuǎn)變。

首先，通過npm install --save-dev babel-preset-stage-0命令安裝缺失的npm module。

其次，為了在我們項(xiàng)目中能夠使用新的語法，我們需要在gulpfile.js文件的第8行做一些改變，代碼如下：

.transform("babelify", {presets: ["react", "es2015", "stage-0"]})

你可以從GitHub repository直接拷貝gulpfile.js完整的代碼。

Inside class add this right above :

在CartItem中將下面的代碼：

static get defaultProps() {
    return {
      title: "Undefined Product",
      price: 100,
      initialQty: 0
    }
}


static propTypes = {
  title: React.PropTypes.string.isRequired,
  price: React.PropTypes.number.isRequired,
  initialQty: React.PropTypes.number
}

替換成下面的代碼：

  static propTypes = {
        title: React.PropTypes.string.isRequired,
        price: React.PropTypes.number.isRequired,
        initialQty: React.PropTypes.number
    };    
    static defaultProps = {
        title: "Undefined Product",
        price: 100,
        initialQty: 0
    };

最后一步將初始狀態(tài)從構(gòu)造函數(shù)中轉(zhuǎn)變成屬性初始化。

在CartItem構(gòu)造函數(shù)的后天添加正確的代碼：

export default class CartItem extends React.Component {

    // .. constructor starts here
    state = {
        qty: this.props.initialQty,
        total: 0
    };
    // .. some code here

你需要把狀態(tài)初始化代碼從構(gòu)造函數(shù)中刪除。

最后你需要檢查一下cartItem.jsx文件里面完整的代碼：

import React from "react";

export default class CartItem extends React.Component {
    constructor(props) {
        super(props);
    }

    state = {
        qty: this.props.initialQty,
        total: 0
    };

    static propTypes = {
        title: React.PropTypes.string.isRequired,
        price: React.PropTypes.number.isRequired,
        initialQty: React.PropTypes.number
    };
    static defaultProps = {
        title: "Undefined Product",
        price: 100,
        initialQty: 0
    };

    componentWillMount() {
        this.recalculateTotal();
    }
    increaseQty() {
        this.setState({qty: this.state.qty + 1}, this.recalculateTotal);
    }
    decreaseQty() {
        let newQty = this.state.qty > 0 ? this.state.qty - 1 : 0;
        this.setState({qty: newQty}, this.recalculateTotal);
    }
    recalculateTotal() {
        this.setState({total: this.state.qty * this.props.price});
    }

    render() {
        return (
          

              

                  

                      
                  
                  
              
              
Quantity: {this.state.qty}

              

                  +
                  -
              

              
Price per item: ${this.props.price}

              

                  Total: ${this.state.total}
              

          
        )
    }
}

在這一節(jié)中，我們熟練掌握了ES6和ES7 React組建屬性的初始化，類型綁定。

下一小結(jié)，我們繼續(xù)研究React+ES6系列教程。

Props vs state in React

About Prop Validation and more, official React documentation

About experimental features in BabelJS

ES7 Class Properties Proposal