本節(jié)包含內(nèi)容有

React背景及特點(diǎn)
創(chuàng)建React應(yīng)用
開(kāi)始第一個(gè)簡(jiǎn)單程序 - 運(yùn)行Hello World
JSX語(yǔ)法入門
組件
Props
state
組件的生命周期

React背景及特點(diǎn)

• React背景介紹

  在Web應(yīng)用開(kāi)發(fā)的早期赡艰，構(gòu)建Web應(yīng)用的唯一方式就是向服務(wù)器發(fā)送請(qǐng)求，然后服務(wù)器響應(yīng)請(qǐng)求并返回一個(gè)完整的頁(yè)面。從開(kāi)發(fā)角度上講這種方式非常簡(jiǎn)單挂签，但是這種開(kāi)發(fā)方式會(huì)造成很不好的用戶體驗(yàn)号涯，用戶的很多行為都需要向服務(wù)器請(qǐng)求蚁滋，等待服務(wù)器的反應(yīng)璃赡。因此嚼蚀，開(kāi)發(fā)者開(kāi)始開(kāi)發(fā)各種類庫(kù)导而，使用JavaScript在瀏覽器端渲染應(yīng)用忱叭。

  React起源于Facebook公司，期初用于Instagram網(wǎng)站開(kāi)發(fā)今艺。React是一個(gè)用于構(gòu)建用戶界面的JavaScript庫(kù)韵丑，不是一個(gè)MVC框架，提出了一種新的開(kāi)發(fā)模式和理念虚缎，它強(qiáng)調(diào)的是“用戶界面”撵彻。

• React特點(diǎn)

  1.作為UI

  React可以作為MVC中的View層進(jìn)行使用，并且在已有項(xiàng)目中很容易使用React開(kāi)發(fā)新功能实牡。
  2.虛擬DOM

  虛擬DOM是React最重要的特性陌僵，實(shí)現(xiàn)了優(yōu)化視圖的渲染和刷新。以前沒(méi)有Ajax技術(shù)的時(shí)候创坞，Web頁(yè)面從服務(wù)器端整體渲染出HTML碗短，輸出到瀏覽器端進(jìn)行渲染，同樣的题涨，用戶的一個(gè)改變頁(yè)面的操作也會(huì)刷新整個(gè)頁(yè)面來(lái)完成偎谁。知道Ajax的出現(xiàn)，實(shí)現(xiàn)頁(yè)面局部刷新纲堵，帶來(lái)的高效和分離讓W(xué)eb開(kāi)發(fā)者們驚嘆不已巡雨。但隨之而來(lái)的問(wèn)題是復(fù)雜的用戶交互及展現(xiàn)需要通過(guò)大量的DOM操作來(lái)完成，這讓頁(yè)面的性能以及開(kāi)發(fā)的效率又出現(xiàn)了新的瓶頸婉支。如何進(jìn)行高性能的復(fù)雜DOM操作通常是衡量一個(gè)前端開(kāi)發(fā)人員技能的重要指標(biāo)鸯隅。

  時(shí)至今日，談到前端性能優(yōu)化，減少DOM元素蝌以，減少reflow和repaint炕舵，編碼過(guò)程盡量減少DOM的查詢等手段是大家耳熟能詳?shù)摹６?yè)面任何UI的變化都是通過(guò)整體刷新來(lái)完成的跟畅。而React之所以快咽筋，是因?yàn)樗恢苯硬僮鱀OM，而是引進(jìn)虛擬DOM的實(shí)現(xiàn)來(lái)解決這個(gè)問(wèn)題徊件。

  3.組件化

  虛擬DOM（virtual-dom）不僅帶來(lái)了簡(jiǎn)單UI開(kāi)發(fā)邏輯奸攻，同時(shí)也帶來(lái)了組件化開(kāi)發(fā)的思想。所謂組件虱痕，即封裝起來(lái)的具有獨(dú)立功能的UI部件睹耐。React推薦以組件的方式去重新思考UI構(gòu)成，將UI上每一個(gè)功能相對(duì)獨(dú)立的模塊定義出呢個(gè)組件部翘，然后將小的組件通過(guò)組合或者嵌套的方式構(gòu)成的大的組件硝训，最終完成整體UI的構(gòu)建。

  如果說(shuō)MVC的思想讓你做到視圖-數(shù)據(jù)-控制器的分離新思。那么組件化的思考方式則是帶來(lái)了UI功能模塊之間的分離窖梁。

  對(duì)于React而言，開(kāi)發(fā)者從功能的角度出發(fā)夹囚，將UI分成不同的組件纵刘，每個(gè)組件都獨(dú)立封裝。在React中荸哟，你按照界面模塊自然劃分的方式來(lái)組織和編寫你的代碼假哎。每個(gè)組件只關(guān)心自己部分的邏輯，彼此獨(dú)立鞍历。React組件應(yīng)該具有如下特征：可組合位谋、可重用、可維護(hù)

  4.數(shù)據(jù)流

  React實(shí)現(xiàn)了單向的數(shù)據(jù)流堰燎，相對(duì)于傳統(tǒng)的數(shù)據(jù)綁定，React更加靈活笋轨、便捷秆剪。

• React學(xué)習(xí)準(zhǔn)備

  1、前端基礎(chǔ)知識(shí)：HTML爵政，CSS仅讽，JavaScript
  2、JSX語(yǔ)法
  3钾挟、ES6相關(guān)知識(shí)
  4洁灵、React中文網(wǎng)站：http://www.css88.com/react/index.html

• React和ReactNative的關(guān)系

  React用于Web用用開(kāi)發(fā)。ReactNative采用React方式進(jìn)行移動(dòng)應(yīng)用開(kāi)發(fā)。
  ReactNative采用React語(yǔ)法徽千，用于進(jìn)行JavaScript跨終端應(yīng)用開(kāi)發(fā)苫费，既擁有原生Native的交互體驗(yàn)，又能夠保留React自由的開(kāi)發(fā)效率双抽。使用靈活的HTML和CSS布局百框，使用React語(yǔ)法構(gòu)建組件，然后同時(shí)運(yùn)行在iOS和Android平臺(tái)上牍汹，“Learn once铐维，write anywhere”

1.創(chuàng)建React應(yīng)用

使用命令行：

npm install -g create-react-app
create-react-app my-app

在my-app目錄下運(yùn)行npm

cd my-app
npm start

這時(shí)候在瀏覽器中就會(huì)顯示運(yùn)行結(jié)果，可以在index.js文件下進(jìn)行修改

2.運(yùn)行Hello World

import React from 'react';
import ReactDOM from 'react-dom';
import registerServiceWorker from './registerServiceWorker';
import './index.css';

// React的最基本方法慎菲，用于將模板轉(zhuǎn)換成HTML語(yǔ)言嫁蛇，渲染DOM并插入指定的DOM節(jié)點(diǎn)
/*
三個(gè)參數(shù)
第一個(gè)：模板的渲染內(nèi)容（HTML形式）
第二個(gè)： 這段模板需要插入的DOM節(jié)點(diǎn)，本程序中id為root的div節(jié)點(diǎn)
第三個(gè)：渲染后的回調(diào)露该，一般不用
*/
ReactDOM.render(
    <h1>Hello World</h1>
    document.getElementById('root')
);

registerServiceWorker();

3.JSX入門

JSX不是一門新的語(yǔ)言睬棚，是個(gè)語(yǔ)法（語(yǔ)法糖）

• JSX必須借助React環(huán)境運(yùn)行
• JSX標(biāo)簽其實(shí)就是HTML標(biāo)簽，只不過(guò)我們?cè)贘avaScript中書(shū)寫這些標(biāo)簽的時(shí)候有决，不用使用“”括起來(lái)

<h1>Hello World</h1> 這就是JSX語(yǔ)法

• 轉(zhuǎn)換：JSX語(yǔ)法能夠讓我們更直觀的看到組件的DOM結(jié)構(gòu)闸拿，不能直接在瀏覽器上運(yùn)行，最終會(huì)轉(zhuǎn)化成JavaScript代碼

// JSX語(yǔ)法書(shū)寫
ReactDOM.render(
    <h1>
       Hello React
    </h1>,
    document.getElementById('root')
);

// JavaScript語(yǔ)法書(shū)寫
ReactDOM.render(
    React.createElement("h1", null, "Hello React"),
    document.getElementById('root')
);

兩種寫法的比較书幕，可以看出來(lái)JSX的寫法結(jié)構(gòu)很清晰新荤，書(shū)寫也簡(jiǎn)單。

• 如何在JSX中運(yùn)行JavaScript代碼台汇，使用{表達(dá)式}括起來(lái),如下邊的寫法

var text = "世界"
ReactDOM.render(
    <h1>{text}</h1>,
    document.getElementById('root')
);

• JSX語(yǔ)法在屬性苛骨、設(shè)置樣式和事件綁定等中的應(yīng)用

4.組件

（1）定義組件
創(chuàng)建一個(gè)組件類，用于輸出Hello React

var HelloMessage = React.createClass({
    render: function () {
      // return <h1>Hello React</h1>;
       // 如果想動(dòng)態(tài)輸出內(nèi)容這里使用屬性
        return <h1>{this.props.helloText}</h1>
    }
});

ReactDOM.render(
    // 在模板中插入<HelloMessage />會(huì)自動(dòng)生成一個(gè)實(shí)例
    <HelloMessage helloText="Hello React"/>,
    document.getElementById('root')
);

• React中創(chuàng)建的組件類以大寫字母開(kāi)頭苟呐，駝峰命名法
• 在React中使用React.creatClass方法創(chuàng)建一個(gè)組件類
• 核心代碼：每個(gè)組件都必須實(shí)現(xiàn)自己的render方法痒芝。輸出定義好的組件模板。返回值：null牵素，false严衬，組件模板
• 注意：組件類只能包含一個(gè)頂層標(biāo)簽

（2）組件的樣式
設(shè)置組件的樣式： 內(nèi)聯(lián)樣式，對(duì)象樣式笆呆，選擇器樣式

注意：在React和HTML5中設(shè)置樣式時(shí)的書(shū)寫格式是由區(qū)別的：
1.HTML5以分號(hào)请琳；結(jié)尾，React以逗號(hào)赠幕，結(jié)尾
2.HTML5中key俄精、value都不加引號(hào)，React中屬于JavaScript對(duì)象榕堰，key的名字不能出現(xiàn)分隔符“-”竖慧，需要使用駝峰命名法，
如果value為字符串，需要加引號(hào)圾旨。
3.HTML5中踱讨，value如果是數(shù)字需要帶單位，React中不需要帶單位

定義一個(gè)組件類碳胳，同時(shí)使用三種設(shè)置組件樣式的方式勇蝙。div使用內(nèi)聯(lián)樣式：設(shè)置背景顏色，邊框大小挨约，邊框顏色刻帚；h1使用對(duì)象樣式：設(shè)置背景顏色临扮，字體顏色诅迷；p使用選擇器樣式：設(shè)置字體大小

var ShowMessage = React.createClass({
    render: function() {
        return (
            <div style={{backgroundColor:"yellow", borderWidth: 5, borderColor:"black", borderStyle:"solid"}}>
                <h1 style={hStyle}>{this.props.firstRow}</h1>
                // 在React中使用選擇器樣式設(shè)置組件樣式時(shí)桩了，屬性名不能使用class，需要使用className替換夕土。同樣的還有使用htmlFor替換for
                <p className="pStyle">{this.props.secondRow}</p>
            </div>
        )
    }
});

// 創(chuàng)建設(shè)置h1樣式對(duì)象Name
var hStyle = {
    backgroundColor: "green",
    color: "red"
}

ReactDOM.render(
    <ShowMessage firstRow="你好" secondRow="小明"/>,
    document.getElementById('root')
);

這里p使用的是選擇樣式馆衔，將樣式寫在index.css中，在使用的過(guò)程中進(jìn)行導(dǎo)入

import './index.css';

.pStyle {
  font-size: 20px;
}

在React中使用選擇器樣式設(shè)置組件樣式時(shí)怨绣，屬性名不能使用class角溃，需要使用className替換。同樣的還有使用htmlFor替換for

(3)復(fù)合組件

復(fù)合組件 也稱為組合組件篮撑，創(chuàng)建多個(gè)組件合成一個(gè)組件减细。定義一個(gè)組件的WebShow。功能：輸出網(wǎng)站的名字和網(wǎng)址赢笨，網(wǎng)址是一個(gè)可以點(diǎn)擊的鏈接未蝌。

分析：定義一個(gè)組件WebName負(fù)責(zé)輸出網(wǎng)站名字，定義組件WebLink顯示網(wǎng)站的網(wǎng)址茧妒，并且可以點(diǎn)擊

// 定義WebName組件
var WebName = React.createClass({
    render: function() {
        return (
            <h1>{this.props.webName}</h1>
        )
    }
});

// 定義WebLink組件
var WebLink = React.createClass({
    render: function() {
        return (
             <a href={this.props.webLink}>{this.props.webLink}</a>
        )
    }
});

// 組合組件WebShow
var WebShow = React.createClass({
    render: function() {
        return (
            <div>
                <WebName webName={this.props.webName}/>
                <WebLink webLink={this.props.webLink}/>
            </div>
        )
    }
});


ReactDOM.render(
    <WebShow webName="新浪" webLink="http://www.sina.com.cn"/>,
    document.getElementById('root')
);

5.props

props是組件自身的屬性萧吠，一般用于嵌套的內(nèi)外層組件中，負(fù)責(zé)傳遞數(shù)據(jù)（通常是由父層向子層組件傳遞）

注意：props對(duì)象中的屬性與組件的屬性一一對(duì)應(yīng)桐筏，不要直接直接去修改props中屬性的值

...this.props

這個(gè)是props提供的語(yǔ)法糖纸型，可以將父組件中的全部屬性都復(fù)制給子組件

下邊定義一個(gè)Link組件，Link組件只包含一個(gè)<a>,我們不給<a>設(shè)置任何屬性梅忌，所有屬性全部從父組件復(fù)制得到

var Link = React.createClass({
    render: function () {
        return <a {...this.props}>{this.props.name}</a>
    }
});

ReactDOM.render(
    <Link  name="百度" />,
    document.getElementById("root")
)

this.props.children

children組件是一個(gè)例外绊袋，不是跟組件的屬性對(duì)應(yīng)的，它表示組件的所有子節(jié)點(diǎn)

下邊展示一種列表铸鹰，在HTML5中有一種標(biāo)簽：<ul> <ol> <li>。定義一個(gè)列表組件皂岔，列表項(xiàng)中顯示的內(nèi)容蹋笼，以及列表項(xiàng)的數(shù)量都由外部決定。

var ListComponent = React.createClass({
    render: function () {
        return (
            <ul>
                {
                    // 列表項(xiàng)數(shù)量不確定，在創(chuàng)建模板時(shí)才能確定剖毯，利用this.props.children從父組件獲取需要展示的列表項(xiàng)內(nèi)容
                    // 獲取到列表項(xiàng)內(nèi)容后圾笨，需要遍歷children，逐行進(jìn)行設(shè)置
                    // 使用React.Children.map方法 返回值：數(shù)組對(duì)象逊谋，這里數(shù)組中的元素是<li>
                    React.Children.map(this.props.children, function (child) {
                        // child是遍歷得到的父組件的子節(jié)點(diǎn)
                        return <li>{child}</li>
                    })
                }
            </ul>
        );
    }
});

ReactDOM.render(
    (
        <ListComponent>
            <h1>百度文庫(kù)</h1>
            <a >http://www.baidu.com</a>
            <h1>百度文庫(kù)</h1>
            <a >http://www.baidu.com</a>
            <h2>百度文庫(kù)</h2>
         </ListComponent>
    ),
    document.getElementById("root")
);

屬性驗(yàn)證

用來(lái)驗(yàn)證外部設(shè)置的值是否符合組件對(duì)屬性類型的要求擂达，也是組件類的屬性。用來(lái)驗(yàn)證組件實(shí)例的屬性是否符合要求

var ShowTitle = React.createClass({
    // 屬性驗(yàn)證
    propTypes: {
        // title 必須為字符串
        title: React.PropTypes.string.isRequired
    },
    render: function () {
        return <h1>{this.props.title}</h1>
    }
});

ReactDOM.render(
    // 這里如果傳入title=1234胶滋，運(yùn)行就會(huì)出錯(cuò)板鬓，因?yàn)閷傩则?yàn)證要求組件傳入的屬性時(shí)字符串類型的
    <ShowTitle title="1234"/>,
    document.getElementById("root")
);

設(shè)置組件屬性的默認(rèn)值

通過(guò)實(shí)現(xiàn)組件的getDefaultProps方法，對(duì)屬性設(shè)置默認(rèn)值

var ShowTitle = React.createClass({
    getDefaultProps: function () {
        return {
            title: "小明"
        }
    },
    
    render: function () {
        return <h1>{this.props.title}</h1>
    }
});

ReactDOM.render(
    // 這里雖然沒(méi)有傳入屬性值究恤，但是屬性設(shè)置了默認(rèn)值俭令，因此渲染結(jié)果是顯示出“小明”字樣
    <ShowTitle />,
    document.getElementById("root")
);

6.state

事件處理
定義一個(gè)組件，組件中包含一個(gè)button部宿，給button綁定onClick事件

var MyButton = React.createClass({
    // React中的事件名稱抄腔，首字母小寫，駝峰命名法
    handleClick: function () {
        alert("點(diǎn)擊按鈕觸發(fā)的效果")
    },

    render: function () {
        return <button onClick={this.handleClick}>{this.props.buttonTitle}</button>
    }
});

ReactDOM.render(
    <MyButton buttonTitle="按鈕" />,
    document.getElementById("root")
);

state狀態(tài)
state和props一樣理张，都是組件自身的屬性赫蛇，通過(guò)調(diào)用this.state

下邊創(chuàng)建一個(gè)CheckButton組件，包含一個(gè)checkbox類型的<input>雾叭，復(fù)選框在選中和未選中兩種狀態(tài)下會(huì)顯示不同的文字悟耘，即根據(jù)狀態(tài)渲染

var CheckButton = React.createClass({
    // 定義初始狀態(tài)
    getInitialState: function () {
        return {
            // 在這個(gè)對(duì)象中設(shè)置的屬性，將會(huì)存儲(chǔ)在state中
            isCheck: false
        }
    },

    // 定義事件綁定的方法
    handleChange: function () {
        // 修改狀態(tài)值拷况，通過(guò)this.state讀取設(shè)置的狀態(tài)值
        this.setState({
            isCheck: !this.state.isCheck
        });
    },

    render: function () {
        // 根據(jù)狀態(tài)值作煌，設(shè)置顯示的文字
        // 注意： 在JSX中不能直接使用if, 如果需要條件判斷需要在外邊寫個(gè)方法將結(jié)果傳進(jìn)來(lái)就行，可以使用三目運(yùn)算符
        var text = this.state.isCheck ? "已選中" : "未選中";
        return (
            // 返回結(jié)果只能有一個(gè)根節(jié)點(diǎn)
            <div>
                <input type="checkbox" onChange={this.handleChange} />
                {text}
            </div>
        );
    }
});

ReactDOM.render(
    <CheckButton />,
    document.getElementById("root")
);

注意：
當(dāng)state發(fā)生變化時(shí)赚瘦，會(huì)調(diào)用組件內(nèi)部的render方法

表單的基本使用

定義一個(gè)組件粟誓，將用戶在輸入框內(nèi)輸入的內(nèi)容進(jìn)行實(shí)時(shí)顯示。組件在于用戶的交互過(guò)程中起意，存在狀態(tài)的變化鹰服，即輸入框的值

var Input = React.createClass({
    getInitialState: function () {
            return {
                value: "請(qǐng)輸入"
            };
    },

    // 輸入框的輸入回傳進(jìn)來(lái)一個(gè)參數(shù)event
    handeleChange: function (event) {
        // 通過(guò)event.target.value讀取用戶輸入的值
        this.setState({
            value: event.target.value
        });
    },

    render: function () {
        var value = this.state.value;
        return(
            <div>
                <input type="text" value={value} onChange={this.handeleChange} />
                <p>{value}</p>
            </div>
        );
    }
});

ReactDOM.render(
    <Input />,
    document.getElementById("root")
);

7.組件的生命周期

生命周期介紹

組件的生命周期可分成三個(gè)狀態(tài)：

• Mounting：組件掛載，已插入真實(shí)的DOM
• Updating：組件更新揽咕，正在被重新渲染
• Unmounting: 組件移出悲酷，已移出真實(shí)DOM

組件的生命周期可分成四個(gè)階段：創(chuàng)建、實(shí)例化亲善、更新设易、銷毀

每種狀態(tài)對(duì)應(yīng)的方法：

• Mounting/組件掛在相關(guān)：

  • componentWillMount：組件將要掛載。在render方法之前執(zhí)行蛹头，但僅執(zhí)行一次顿肺，即使多次重復(fù)渲染該組件戏溺，或者改變了組件的state
  • componentDidMount：組件已經(jīng)掛在。在render之后執(zhí)行屠尊，同一個(gè)組件重復(fù)渲染只執(zhí)行一次

• Updating/組件更新相關(guān)：

  • componentWillReceiveProps(object nextProps)：已加載組件收到新的props之前調(diào)用旷祸，注意組件初始化渲染時(shí)不會(huì)執(zhí)行
  • shouldComponentUpdate(object nextProps, object nextState)：組件判斷是否重新渲染時(shí)調(diào)用。該接口實(shí)際是在組件接收到了新的props或者新的state的時(shí)候會(huì)立即調(diào)用讼昆。返回一個(gè)Bool值托享。默認(rèn)情況下是ture，這就是為什么在前文中說(shuō)只要調(diào)用this.setState方法浸赫，就會(huì)重新渲染闰围。當(dāng)返回結(jié)果為true時(shí)會(huì)立即調(diào)用下邊另外兩個(gè)方法，如果返回false掺炭，則不會(huì)進(jìn)行更新辫诅。
  • componentWillUpdate(object nextProps, object nextState)：組件將要更新
  • componentDidUpdate(object prevProps, object prevState)：組件已經(jīng)更新

• Unmounting/組件移除相關(guān)：

  • componentWillUnmount：在組件要被移除之前的時(shí)間點(diǎn)觸發(fā)，可以利用該方法來(lái)執(zhí)行一些必要的清理組件相關(guān)的工作

• 生命周期中與props和state相關(guān)：

  • getDefaultProps 設(shè)置props屬性默認(rèn)值
  • getInitialState 設(shè)置state屬性初始值

生命周期各階段介紹

• 一涧狮、創(chuàng)建階段流程：
  • 只調(diào)用getDefaultProps方法
• 二炕矮、實(shí)例化階段流程：
  • getInitialState
  • componentWillMount
  • render
  • componentDidMount
• 三、更新階段流程：
  • componentWillReceiveProps
  • shouldComponentUpdate 如果返回值是false者冤，后三個(gè)方法不執(zhí)行
  • componentWillUpdate
  • render
  • componentDidUpdate
• 四肤视、銷毀階段流程：
  • 流程：componentWillUnmount

var Demo = React.createClass({
    /*
        一、創(chuàng)建階段
        流程：只調(diào)用getDefaultProps方法
    */
    getDefaultProps: function () {
            // 正在創(chuàng)建類的時(shí)候被調(diào)用涉枫，設(shè)置this.props的默認(rèn)值
            console.log("getDefaultProps");
            return {};
    },

    /*
        二邢滑、實(shí)例化階段
        流程： getInitialState
                    componentWillMount
                    render
                    componentDidMount
    */
    getInitialState: function () {
        // 設(shè)置this.state的默認(rèn)值
        console.log("getInitialState");
        return null;
    },
    componentWillMount: function () {
        // 在render之前調(diào)用
        console.log("componentWillMount");
    },
    render: function () {
        // 渲染并返回一個(gè)虛擬的DOM
        console.log("render");
        return <div>Hello React</div>
    },
    componentDidMount: function () {
        // 在render之后調(diào)用 在該方法中，React會(huì)使用render方法返回的虛擬DOM對(duì)象創(chuàng)建真實(shí)的DOM結(jié)構(gòu)
        // 可以在這個(gè)方法中讀取DOM節(jié)點(diǎn)
        console.log("componentDidMount");
    },

    /*
        三愿汰、更新階段
        流程：componentWillReceiveProps
                 shouldComponentUpdate  如果返回值是false困后，后三個(gè)方法不執(zhí)行
                 componentWillUpdate
                 render
                 componentDidUpdate
    */
    componentWillReceiveProps: function () {
        console.log("componentWillReceiveProps");
    },
    shouldComponentUpdate: function () {
        console.log("shouldComponentUpdate");
        return true;
    },
    componentWillUpdate: function () {
        console.log("componentWillUpdate");
    },
    componentDidUpdate: function () {
        console.log("componentDidUpdate");
    },

    /*
        四、銷毀階段
        流程：componentWillUnmount
    */
    componentWillUnmount: function () {
        console.log("componentWillUnmount");
    }
});

// 第一次創(chuàng)建并加載組件
ReactDOM.render(
    <Demo />,
    document.getElementById("root")
);
/*
    上邊結(jié)果返回的是：
    getDefaultProps
    getInitialState
    componentWillMount
    render
    componentDidMount
*/

// 更新渲染組件
ReactDOM.render(
    <Demo />,
    document.getElementById("root")
);
/*
    更新渲染后的結(jié)果：
    componentWillReceiveProps
    shouldComponentUpdate
    componentWillUpdate
    render
    componentDidUpdate

    注意如果將shouldComponentUpdate的返回值設(shè)置成false衬廷，那么該方法以下的步驟將不會(huì)再執(zhí)行
    返回結(jié)果是：
    componentWillReceiveProps
    shouldComponentUpdate
*/

// 移出組件
ReactDOM.unmountComponentAtNode(document.getElementById("root"));
/*
    移出組件后的結(jié)果：
    componentWillUnmount
*/