本文主要講解React中關于組件的使用、React特有的JSX語法以及React生命周期的使用等，具體如下：
React的虛擬DOM
React組件
React多組件嵌套
React的語法—JSX
React的生命周期
1、React的虛擬DOM
innerHTML: render html string + 重新創建所有 DOM 元素
Virtual DOM: render Virtual DOM + diff + 必要的 DOM 更新?
更加詳細介紹，請查看React虛擬DOM詳解
2、React組件
1、創建組件：
1）沒有函數定義
2）ES5原生方式：React.createClass，（this自動綁定）
3）ES6形式：extends React.Component，（this來源于super()）
2、組件：是React的一個特性
3、組件對于模塊化開發的重要性
4、組件的return函數中返回的HTML節點有且只有一個
5、可以給外部使用的組件定義：export default class Header extends React.Component{}
6、組件導入：import Header from “XXX文件”;
7、網頁入口：ReactDOM.render(組件, document.getElementById(“xxx”));
詳細代碼如下：
3、React多組件嵌套
組件可以通過參數傳遞
return中只允許一個標簽容器，但是標簽容器中可以存放無數個標簽
注意項目的命名和文件的結構化
代碼如下：
4、React的語法—JSX內置表達式
語法：{userName == “” ??用戶還沒有登錄?:?用戶名：${userName}}
? ? ? 注釋的寫法：{/按鈕/}
? ? ? HTML顯示Unicode轉碼
? ? ? HTML顯示特殊字符：dangerouslySetInnerHTML ={{__html : html}}—此方式存在XSS攻擊
JSX讀取數組的時候，直接數組名，可以訪問到所有的成員變量
JSX讀取對象時，仍然遵循對象.屬性的操作
JSX的語法在編譯上遵循規則：?
遇到HTML標簽(以<開頭)就用HTML規則解析 ；
遇到代碼塊(以{開頭)就用JavaScript規則解析。
代碼詳情：
5、 React的生命周期
生命周期共提供了10個不同的API（實例化5個、已加載4個、銷毀1個）。
1.getDefaultProps
作用于組件類，只調用一次，返回對象用于設置默認的props，對于引用值，會在實例中共享。
2.getInitialState
作用于組件的實例，在實例創建時調用一次，用于初始化每個實例的state，此時可以訪問this.props。
3.componentWillMount
在完成首次渲染之前調用，此時仍可以修改組件的state。
4.render
必選的方法，創建虛擬DOM，該方法具有特殊的規則：
5.componentDidMount
真實的DOM被渲染出來后調用，在該方法中可通過this.getDOMNode()訪問到真實的DOM元素。此時已可以使用其他類庫來操作這個DOM。?
在服務端中，該方法不會被調用。
6.componentWillReceiveProps
組件接收到新的props時調用，并將其作為參數nextProps使用，此時可以更改組件props及state。
7.shouldComponentUpdate
組件是否應當渲染新的props或state，返回false表示跳過后續的生命周期方法，通常不需要使用以避免出現bug。在出現應用的瓶頸時，可通過該方法進行適當的優化。?
在首次渲染期間或者調用了forceUpdate方法后，該方法不會被調用
8.componentWillUpdate
接收到新的props或者state后，進行渲染之前調用，此時不允許更新props或state。
9.componentDidUpdate
完成渲染新的props或者state后調用，此時可以訪問到新的DOM元素。
10.componentWillUnmount
組件被移除之前被調用，可以用于做一些清理工作，在componentDidMount方法中添加的所有任務都需要在該方法中撤銷，比如創建的定時器或添加的事件監聽器。
具體圖解如下：?
6、 總結
本文主要是對React組件的書寫以及使用作出簡要介紹，具體代碼可以下載—鏈接：https://pan.baidu.com/s/1qZATfYG?密碼：7kkj
下載完畢之后，通過命令面板定位到當前文件夾，之后執行npm install安裝所有環境，安裝完畢之后，執行webpack –watch，項目即可運行。
