摘要：上面代碼中，通過為組件指定事件的回調(diào)函數(shù)，確保了只有等到真實發(fā)生事件之后，才會讀取屬性。七表單代碼九要點文本輸入框的值，不能用讀取，而要定義一個事件的回調(diào)函數(shù)，通過讀取用戶輸入的值。

JSX即JavaScript XML,一種在React組件內(nèi)部構(gòu)建標(biāo)簽的類XML語法。
在不使用JSX的情況下，React程序中創(chuàng)建DOM是這樣的：

//v0.11
React.DOM.h1({className: "title"}, "Title");
//v0.12
React.createElement("h1", {className: "title"}, "Title");

如果使用JSX的方式創(chuàng)建節(jié)點為：

Title

JSX的特征：

JSX是一種句法變換，每一個JSX節(jié)點都對應(yīng)著一個JavaScript函數(shù)

JSX即不提供也不需要運行時庫

JSX并沒有改變或者添加JavaScript的語義，它只是簡單的函數(shù)調(diào)用。

要點一：在整個Html文件中，只有定義了一個id為example的div標(biāo)簽，當(dāng)程序運行時，JavaScript代碼執(zhí)行，
React會創(chuàng)建新的DOM節(jié)點，也就是

Hello,react!

要點二：

要點：通過在JavaScript中定義變量，可嵌入JSX中使用動態(tài)變量，使用的語法為：

要點：可以通過傳入節(jié)點數(shù)組的方式，直接把數(shù)組給予新的節(jié)點，

React的組件化模式是最大的亮點，組件中使用props或者state，當(dāng)這兩個變量改變時，相應(yīng)的DOM表現(xiàn)也會有所改變，這主要原因是一個
組件是一個狀態(tài)機(jī)，對于特定的輸入，他總會返回一致的輸出。

要點一： 構(gòu)造一個組件的語法使用ES6的標(biāo)準(zhǔn)進(jìn)行，通過繼承React.Component,使用render() {...}進(jìn)行渲染對應(yīng)的標(biāo)簽和變量輸出組件

要點二： 命名新構(gòu)造的組件的第一個字母需要大寫?。?！

要點三： 使用構(gòu)造好的組件，通過使用標(biāo)簽，其中name是傳遞進(jìn)去的參數(shù)，在內(nèi)部用this.props.name進(jìn)行
調(diào)用變量

1.Mounting:已插入真實 DOM

2.Updating:正在被重新渲染

3.Unmounting:已移出真實 DOM

1.componentWillMount():改方法在完成首次渲染之前被調(diào)用。是在render方法調(diào)用前可以修改組件state的最后一次機(jī)會

2.componentDidMount():當(dāng)render方法成功調(diào)用后，且DOM已經(jīng)被渲染，可以在componentDidMount內(nèi)部通過this.getDOMNode()方法訪問到DOM節(jié)點

3.componentWillUpdate(object nextProps, object nextState):組件在收到新的props或者state進(jìn)行渲染之前，這時調(diào)用該方法

4.componentDidUpdate(object prevProps, object prevState):這個方法可以讓我們更新已經(jīng)渲染好的DOM的機(jī)會

5.componentWillUnmount():當(dāng)組件的生命結(jié)束時，這個方法就會被調(diào)用

1.componentWillReceiveProps(object nextProps):已加載組件收到新的參數(shù)時調(diào)用

2.shouldComponentUpdate(object nextProps, object nextState):組件判斷是否重新渲染時調(diào)用

通過props可以把任意類型的數(shù)據(jù)傳遞給組件

var tables = [{title: "React"}]

可以通過this.props.tables訪問對應(yīng)的屬性，然絕對不能修改。一個組件絕對不可以自己修改自己的props!!!

通過在組件中定義一個配置對象。組件初始化時，如果傳遞的屬性和propsTypes不匹配，就會打印一個console.warn日志，
如果是可選的配置，就可以去掉isRequired。

要點: 示例中定義了一個組件MyTitle，其中使用propTyps對組件的屬性類型進(jìn)行匹配，defaultProps對組件的屬性類型設(shè)置默認(rèn)值。

要點: 通過this.props.children來獲取組件的子節(jié)點

每個React組件都可以擁有自己的state，state與props的區(qū)別在于前者只存在于組件的內(nèi)部中，this.props
表示那些一旦定義，就不再改變的特性，而 this.state 是會隨著用戶互動而產(chǎn)生變化的特性。state可以確定
視圖的狀態(tài)。

要點：組件LikeButton通過constructor構(gòu)造函數(shù)進(jìn)行初始化狀態(tài)，this.state = {liked: false} 把liked的狀態(tài)設(shè)置為false,
然后通過handleClick綁定this,當(dāng)用戶點擊按鈕時，改變liked變量的狀態(tài)，這時視圖也會隨著一起改變。

組件并不是真實的 DOM 節(jié)點，而是存在于內(nèi)存之中的一種數(shù)據(jù)結(jié)構(gòu)，叫做虛擬 DOM （virtual DOM）。只有當(dāng)它
插入文檔以后，才會變成真實的 DOM 。根據(jù) React 的設(shè)計，所有的 DOM 變動，都先在虛擬 DOM 上發(fā)生，然后
再將實際發(fā)生變動的部分，反映在真實 DOM上，這種算法叫做 DOM diff ，它可以極大提高網(wǎng)頁的性能表現(xiàn)。

要點：組件 MyComponent 的子節(jié)點有一個文本輸入框，用于獲取用戶的輸入。這時就必須獲取真實的 DOM 節(jié)點，虛擬 DOM 是拿不到用戶
輸入的。為了做到這一點，文本輸入框必須有一個 ref 屬性，然后 this.refs.[refName] 就會返回這個真實的 DOM 節(jié)點。需要注意的
是，由于 this.refs.[refName] 屬性獲取的是真實 DOM ，所以必須等到虛擬 DOM 插入文檔以后，才能使用這個屬性，否則會報錯。上
面代碼中，通過為組件指定 Click 事件的回調(diào)函數(shù)，確保了只有等到真實 DOM 發(fā)生 Click 事件之后，才會讀取 this.refs.[refName]
屬性。

要點：文本輸入框的值，不能用 this.props.value 讀取，而要定義一個 onChange 事件的回調(diào)函數(shù)，通過
event.target.value 讀取用戶輸入的值。textarea 元素、select元素、radio元素都屬于這種情況

要點：該實例代碼使用了Fetch API來進(jìn)行數(shù)據(jù)獲取，F(xiàn)etch API的具體如何使用在接下來的博客文章會介紹。

github倉庫鏈接：https://github.com/lgybetter/ReactDemo