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

JSX即JavaScript XML,一種在React組件內部構建標簽的類XML語法。
在不使用JSX的情況下，React程序中創建DOM是這樣的：

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

如果使用JSX的方式創建節點為：

Title

JSX的特征：

JSX是一種句法變換，每一個JSX節點都對應著一個JavaScript函數

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

JSX并沒有改變或者添加JavaScript的語義，它只是簡單的函數調用。

要點一：在整個Html文件中，只有定義了一個id為example的div標簽，當程序運行時，JavaScript代碼執行，
React會創建新的DOM節點，也就是

Hello,react!

要點二：

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

要點：可以通過傳入節點數組的方式，直接把數組給予新的節點，

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

要點一： 構造一個組件的語法使用ES6的標準進行，通過繼承React.Component,使用render() {...}進行渲染對應的標簽和變量輸出組件

要點二： 命名新構造的組件的第一個字母需要大寫！！！

要點三： 使用構造好的組件，通過使用標簽，其中name是傳遞進去的參數，在內部用this.props.name進行
調用變量

1.Mounting:已插入真實 DOM

2.Updating:正在被重新渲染

3.Unmounting:已移出真實 DOM

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

2.componentDidMount():當render方法成功調用后，且DOM已經被渲染，可以在componentDidMount內部通過this.getDOMNode()方法訪問到DOM節點

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

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

5.componentWillUnmount():當組件的生命結束時，這個方法就會被調用

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

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

通過props可以把任意類型的數據傳遞給組件

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

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

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

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

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

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

要點：組件LikeButton通過constructor構造函數進行初始化狀態，this.state = {liked: false} 把liked的狀態設置為false,
然后通過handleClick綁定this,當用戶點擊按鈕時，改變liked變量的狀態，這時視圖也會隨著一起改變。

組件并不是真實的 DOM 節點，而是存在于內存之中的一種數據結構，叫做虛擬 DOM （virtual DOM）。只有當它
插入文檔以后，才會變成真實的 DOM 。根據 React 的設計，所有的 DOM 變動，都先在虛擬 DOM 上發生，然后
再將實際發生變動的部分，反映在真實 DOM上，這種算法叫做 DOM diff ，它可以極大提高網頁的性能表現。

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

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

要點：該實例代碼使用了Fetch API來進行數據獲取，Fetch API的具體如何使用在接下來的博客文章會介紹。

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