1、JSX：
JSX代碼中出現的標籤既不是一個字符串，也不是HTML。
JSX是JavaScript的一種語法擴展。建議在React使用JSX編寫代碼，以讓其更直觀。JSX像一種模板語言，但可以使用JavaScript的全部特性。
JSX用於產生React元素。
1) 內嵌JavaScript表達式：
在JSX中可以內嵌任何有效的 JavaScript表達式 ，只需要將該表達式用一對花括號包裹即可。
可以將JSX換行縮進以提高代碼的可讀性，此時需要注意的是：爲了避免 分號自動插入 的bug，即使只有一行JSX代碼，仍然建議將JSX代碼包裹在小括號裏面。
2) JSX也是一種表達式：
編譯完，JSX表達式變成了普通的JS對象。這意味着可以在if和for循環裏面使用JSX，也可以把JSX賦值給變量，作爲參數，或作爲一個函數的返回值。
3) JSX屬性的用法：
可以在一對引號中直接將字符串字面量作爲屬性值，也可以在一對花括號中直接使用JavaScript表達式作爲屬性值，但注意不要同時在一個屬性裏使用引號和花括號。
4) JSX子元素的用法：
如果一個標籤爲空，像XML一樣添加 /> 自結束即可；也可以在JSX標籤中嵌套子元素。
相比HTML，JSX更接近JavaScript，React DOM屬性使用 駝峯式命名法代替HTML屬性命名法。如，在JSX中 class 需要寫作 className ， tabindex 需要寫作 tabIndex 。
5) JSX默認阻止注入攻擊：
在JSX可以安全的嵌入渲染用戶輸入的內容；在渲染前React DOM默認對嵌入JSX中的值進行 編碼 ，以確保應用中不會被注入任何不安全代碼。任何值在渲染之前都會被轉換爲字符串，以避免 XSS (cross-site-scripting) 攻擊。
6) JSX代表對象：
Babel將JSX編譯爲 React.createElement() 調用。React.createElement() 會做適當的檢查來幫助開發者寫0bug的代碼，最終會生成對象，這些對象就是React元素，這些元素詳細描述了最終在屏幕上如何展示，React通過這些對象構造DOM，並持續對其更新。
2、渲染元素
元素是React apps中最小的構建部件。一個元素描述的是希望屏幕上呈現的樣子。
不同於瀏覽器的DOM元素，React元素只是一個對象，並且創建一個元素是非常廉價的。React DOM只需要更新DOM到對應的React元素上。
1) 在DOM裏渲染元素：
HTML中的DOM節點稱爲根DOM節點，因爲在它內部的一切都將被React DOM管理。
通常只有一個根DOM節點，當然也可以分離出多個根DOM節點。
通過ReactDOM.render() 方法，可以把React元素渲染到根DOM節點上。
2) 更新被渲染的元素：
React元素是不可變的。
當創建一個元素時，不能改變它們的子元素或屬性。
唯一能更新UI的方式是創建一個新的元素並且傳給ReactDOM.render()。
3) React只更新需要的部分：
ReactDOM會把元素當前的值，包括其子元素，與之前的值進行比較，並且只會進行必要的更新。
經驗表明，應該思考的是在一個特定的時刻UI應該是什麼樣子，而不是怎樣去改變它，這種思維方式能幫助減少很多bug。
3、組件和props
組件能把UI切割成獨立的，可重用的部件，可以獨立的思考每一個部件。
從概念上看，components 就像Javascript 的函數。允許任意的輸入（props），並返回React元素，描述元素應該怎麼顯示在屏幕上。
1) 函數以及類組件：
A. 函數式組件：
定義組件最簡單的方法就是寫一個Javascript函數，這個函數是一個合法的React元素，因爲它接收一個props對象參數並返回一個React元素。這樣的組件稱爲函數式組件。
functionHelloReact(props) {
return <h1>Hello,{props.name}</h1>;
}B. 類組件：
可以使用ES6的class來定義一個組件。
classHelloReact extends React.Component {
render() {
return <h1>Hello, {this.props.name}</h1>;
}
}2) 渲染組件：
組件可以返回一個元素作爲返回值，元素可以是HTML標籤，也可以是用戶定義的組件。
調用ReactDOM.render()方法渲染組件，當遇到一個用戶定義的組件表示的元素時，React會把JSX裏的屬性作爲一個對象傳遞到組件中，這個對象通常稱爲props。
組件的名字最好都是大寫字母開頭的，且要求是一個閉合標籤。
3) 組合組件：
組件可以引用其他的組件作爲輸出。
組件必須返回一個根組件，一般用一個<div>去包住所有的組件。
4) 切割組件：
不要害怕把組件切割成更小的組件。
切割組件可能看起來像麻煩的工作，但對於一個大型的應用來說，擁有一個可重用的組件是一個回報很高的事情。
一個好的經驗法則：如果UI中某些組件被重用了多次或者自身就足夠複雜，將它們作爲可重用的組件是一個好的選擇。
5) props是隻讀的：
無論聲明一個函數組件或一個類組件，它都不能修改props。
應用的UI是動態的並且經常變化的，這就需要引入state。
4、state和生命週期
state跟porps很相似，但是state是組件私有的，並受組件控制。
相比函數組件，類組件有一些額外的功能，比如添加state和生命週期。
1) 函數組件轉化爲類組件：
可以通過5步把函數組件轉化爲類組件：
A. 創建一個同名的類組件並且繼承React.Compoent；
B. 添加一個空的方法叫做render()；
C. 把函數裏面的內容移到render方法裏面；
D. 把render()裏面的props替換成this.props；
E. 刪掉之前的函數聲明的組件。
2) 添加state到類組件：
可以通過3步把props移到state：
A. 把render()方法裏的this.props.*替換成 this.state.*；
B. 添加constructor ()用來初始化this.state，注意將props作爲參數傳到constructor，在constructor函數體中執行super(props)；當參數傳遞ReactDOM.render()時，React調用組件中的constructor函數。
C. 從元素中移除props。
3) 添加週期方法到類組件：
在有許多組件的應用裏， 當組件被銷燬的時候釋放掉資源是非常重要的。
通常在類組件裏聲明一些特別的方法，當組件mounts和 unmounts的時候去運行這些方法，這些方法被稱爲生命週期方法鉤子。
一個典型的實例是：在componentDidMount這個生命週期的函數方法中設置定時器，在componentWillUnmount這個生命週期的函數方法中卸載定時器。
4) 正確使用state：
A. 別直接修改state的值
修改state的值請用setState()，不要直接對this.state賦值，唯一能聲明this.state的地方只有在constructor裏。
B. state的更新有可能是異步的
React 爲了性能，可能會把批量處理多次的setState() 調用在一個的更新裏。
因爲this.props和this.state可能異步更新了，所有不應該依賴他們的值來計算下一個state。
爲了解決這個問題，讓setState()接收一個函數比接收一個對象的方式更好，這個函數會把前一個state作爲第一個參數，更新的props作爲第二參數：
this.setState((prevState, props) => ({
counter: prevState.counter + props.increment
}))C. state的更新是合併後的
當調用setState()時，React會合並提供的對象到當前的state裏，這意味着在state包含幾個獨立的變量時，能通過單獨調用setState()，獨立更新它們。
5) 單向數據流：
所有的父組件或者子組件都不知道一個組件是stateful或stateless的，並且它們也不應該關心自己是被定義成一個函數組件或者是類組件。
一個組件可能會把自己的state作爲props傳遞給他們的子組件中，這就是單向數據流（從上往下）。任何的state都屬於一些特定的組件，並且任何的數據或UI視圖只能影響在其組件樹下面的組件。
在React app裏，無論一個stateful或stateless的組件都被認爲組件獨立的細節都可能隨着時間而改變。能用stateless組件代替stateful組件，反之亦然。
5、處理事件
處理React元素事件跟處理DOM元素事件很相似，但有一些不同：
React事件使用駝峯式命名的，而不是全小寫。
JSX裏要傳遞函數給事件處理，而不是字符串，也即應該用花括號而不能用引號。
不能通過return false來阻止默認事件，必須顯示地調用e.preventDefault，這裏的e是合成事件，React定義這些合成事件是根據W3C標準的，所以不需要擔心瀏覽器兼容問題。
當用React時，當DOM被創建時，一般都不需要調用addEventListener來添加監聽器到DOM上，相反，只需要在元素最初被渲染時添加一個監聽器。當用es6的class定義一個組件時，一個通常的模式是在class上把事件處理定義一個方法。
注意this的指向，在事件處理函數內部的this不指向該組件，通常的解決方法是對事件處理函數進行bind(this)操作。