jsx的介紹
React 使用 JSX 來替代常規的 JavaScript。
JSX 是一個看起來很像 XML 的 JavaScript 語法擴展。
jsx的優點
JSX 執行更快，因為它在編譯為 JavaScript 代碼后進行了優化。
它是類型安全的，在編譯過程中就能發現錯誤。
使用 JSX 編寫模板更加簡單快速。
JSX的使用方法
獨立文件
內聯樣式
注釋
JSX的語法
JavaScript 表達式的使用
三元運算的使用
數組化標簽
關於組件
函數定義了一個組件：
函數定義名字使用駝峰方法，里面傳參
使用ES6 class 來定義一個組件:
組件傳參，要用name傳給組件，組件里面要用props.name值在添加屬性時， class 屬性需要寫成 className ，for 屬性需要寫成 htmlFor ，這是因為 class 和 for 是 JavaScript 的保留字。
單個組件組合成大組件，使用props進行傳參的喲 App 組件使用了 Name、Url 和 Nickname 組件來輸出對應的信息。
React State(狀態)
普通的state
React 把組件看成是一個狀態機（State Machines）。通過與用戶的交互，實現不同狀態，然后渲染 UI，讓用戶界面和數據保持一致。
React 里，只需更新組件的 state，然后根據新的 state 重新渲染用戶界面（不要操作 DOM）。
以下實例創建一個名稱擴展為 React.Component 的 ES6 類，在 render() 方法中使用 this.state 來修改當前的時間。
添加一個類構造函數來初始化狀態 this.state，類組件應始終使用 props 調用基礎構造函數。
將生命周期方法添加到類中
componentDidMount() 與 componentWillUnmount() 方法被稱作生命周期鈎子。
在組件輸出到 DOM 后會執行 componentDidMount() 鈎子，我們就可以在這個鈎子上設置一個定時器。
this.timerID 為計算器的 ID，我們可以在 componentWillUnmount() 鈎子中卸載計算器。
數據自頂向下流動
父組件或子組件都不能知道某個組件是有狀態還是無狀態，並且它們不應該關心某組件是被定義為一個函數還是一個類。
這就是為什么狀態通常被稱為局部或封裝。 除了擁有並設置它的組件外，其它組件不可訪問。
渲染三個Clock
以上實例中每個 Clock 組件都建立了自己的定時器並且獨立更新。
在 React 應用程序中，組件是有狀態還是無狀態被認為是可能隨時間而變化的組件的實現細節。
我們可以在有狀態組件中使用無狀態組件，也可以在無狀態組件中使用有狀態組件。
React Props
默認 Props
可以通過組件類的 defaultProps 屬性為 props 設置默認值
組合使用 state 和 props
在父組件中設置 state， 並通過在子組件上使用 props 將其傳遞到子組件上。在 render 函數中, 我們設置 name 和 site 來獲取父組件傳遞過來的數據
Props 驗證
React.PropTypes 提供很多驗證器 (validator) 來驗證傳入數據是否有效。當向 props 傳入無效數據時，JavaScript 控制台會拋出警告。
這個方法還不錯喲
React 事件處理
React 元素的事件處理和 DOM 元素類似，通過setState設置組件的狀態，並將組件的狀態聯系起來。
react自有方法（生命周期的方法），用戶定義方法 。
自有方法，componentWillUpdate,componentDidMount 等。
用戶定義方法 handleClick,handleChange,handleMouseover
觸摸 ontouchCancel ontouchEnd ontouchmove ontouchstart
鍵盤類 onkeydown onkeypress onkeyup
剪切 oncopy oncut onpaste
onchange(輸入框單選框下拉列表) oninput（文字輸入） onsubmit(整個表單的提交，禁止表單默認操作)
焦點 onfocus onblur
UI元素 onscroll
滾動 onWell
鼠標類型 onclick oncontextmenu(上下文菜單) ondblclick onmousedown onmouseenter onmouseleave onmousemove onmouseout onmouseover onmouseup
拖拽類 向雲盤中拖拽事件 ondrag ondrop ondragend ondragenter ondragexit ondragleave ondragover ondragstart
事件，狀態關聯，交互，都是在this.setState把整個用戶的行為，狀態的行為結合起來
Toggle 組件渲染一個讓用戶切換開關狀態
你必須謹慎對待 JSX 回調函數中的 this，類的方法默認是不會綁定 this 的。如果你忘記綁定 this.handleClick 並把它傳入 onClick, 當你調用這個函數的時候 this 的值會是 undefined。
這並不是 React 的特殊行為；它是函數如何在 JavaScript 中運行的一部分。通常情況下，如果你沒有在方法后面添加 () ，例如 onClick={this.handleClick}，你應該為這個方法綁定 this。
React 條件渲染
在 React 中，你可以創建不同的組件來封裝各種你需要的行為。然后還可以根據應用的狀態變化只渲染其中的一部分。
React 中的條件渲染和 JavaScript 中的一致，使用 JavaScript 操作符 if 或條件運算符來創建表示當前狀態的元素，然后讓 React 根據它們來更新 UI。
元素變量
React 列表 & Keys
map()實例
使用 map() 方法遍歷數組生成了一個 1 到 5 的數字列表:
重構成一個組件
組件接收數組參數，每個列表元素分配一個 key。Keys 可以在 DOM 中的某些元素被增加或刪除的時候幫助 React 識別哪些元素發生了變化// 只有在沒有確定的 id 時使用
key的正確使用方式
當你在 map() 方法的內部調用元素時，你最好隨時記得為每一個元素加上一個獨一無二的 key。
元素的 key 在他的兄弟元素之間應該唯一
數組元素中使用的 key 在其兄弟之間應該是獨一無二的。然而，它們不需要是全局唯一的。當我們生成兩個不同的數組時，我們可以使用相同的鍵。
JSX 允許在大括號中嵌入任何表達式
這么做有時可以使你的代碼更清晰，但有時這種風格也會被濫用。就像在 JavaScript 中一樣，何時需要為了可讀性提取出一個變量，這完全取決於你。
但請記住，如果一個 map() 嵌套了太多層級，那你就可以提取出組件。
React 組件 API
設置狀態:setState
setState(object nextState[, function callback])合並nextState和當前state，並重新渲染組件。setState是React事件處理函數中和請求回調函數中觸發UI更新的主要方法。關於setState
不能在組件內部通過this.state修改狀態，因為該狀態會在調用setState()后被替換。
setState()並不會立即改變this.state，而是創建一個即將處理的state。setState()並不一定是同步的，為了提升性能React會批量執行state和DOM渲染。
setState()總是會觸發一次組件重繪，除非在shouldComponentUpdate()中實現了一些條件渲染邏輯。
替換狀態：replaceState
replaceState(object nextState[, function callback])
設置屬性：setProps
props相當於組件的數據流，它總是會從父組件向下傳遞至所有的子組件中。當和一個外部的JavaScript應用集成時，我們可能會需要向組件傳遞數據或通知React.render()組件需要重新渲染，可以使用setProps()。
更新組件，我可以在節點上再次調用React.render()，也可以通過setProps()方法改變組件屬性，觸發組件重新渲染。
替換屬性：replaceProps
強制更新：forceUpdate
獲取DOM節點：findDOMNode
如果組件已經掛載到DOM中，該方法返回對應的本地瀏覽器 DOM 元素。當render返回null 或 false時，this.findDOMNode()也會返回null。從DOM 中讀取值的時候，該方法很有用，如：獲取表單字段的值和做一些 DOM 操作。
判斷組件掛載狀態：isMounted
isMounted()方法用於判斷組件是否已掛載到DOM中。可以使用該方法保證了setState()和forceUpdate()在異步場景下的調用不會出錯。
React生命周期的方法有
componentWillMount 在渲染前調用,在客戶端也在服務端。
componentDidMount 在第一次渲染后調用，只在客戶端。之后組件已經生成了對應的DOM結構，可以通過this.getDOMNode()來進行訪問。 如果你想和其他JavaScript框架一起使用，可以在這個方法中調用setTimeout, setInterval或者
發送AJAX請求等操作(防止異部操作阻塞UI)。
componentWillReceiveProps 在組件接收到一個新的 prop (更新后)時被調用。這個方法在初始化render時不會被調用。
shouldComponentUpdate 返回一個布爾值。在組件接收到新的props或者state時被調用。在初始化時或者使用forceUpdate時不被調用。 可以在你確認不需要更新組件時使用
componentWillUpdate 在組件接收到新的props或者state但還沒有render時被調用。在初始化時不會被調用。
componentDidUpdate 在組件完成更新后立即調用。在初始化時不會被調用。
componentWillUnmount 在組件從 DOM 中移除的時候立刻被調用。
componentDidMount
在 Hello 組件加載以后，通過 componentDidMount 方法設置一個定時器，每隔100毫秒重新設置組件的透明度，並重新渲染
React AJAX
React 組件的數據可以通過 componentDidMount 方法中的 Ajax 來獲取，當從服務端獲取數據時可以將數據存儲在 state 中，再用 this.setState 方法重新渲染 UI。
當使用異步加載數據時，在組件卸載前使用 componentWillUnmount 來取消未完成的請求。
React 表單與事件
在實例中我們設置了輸入框 input 值 value = {this.state.data}。在輸入框值發生變化時我們可以更新 state。我們可以使用 onChange 事件來監聽 input 的變化，並修改 state。
在以下實例中我們將為大家演示如何在子組件上使用表單。 onChange 方法將觸發 state 的更新並將更新的值傳遞到子組件的輸入框的 value 上來重新渲染界面。
你需要在父組件通過創建事件句柄 (handleChange) ，並作為 prop (updateStateProp) 傳遞到你的子組件上
