本文主要講解React中關(guān)于組件的使用蜜葱、React特有的JSX語(yǔ)法以及React生命周期的使用等离唐，具體如下：
React的虛擬DOM
React組件
React多組件嵌套
React的語(yǔ)法—JSX
React的生命周期
1幽七、React的虛擬DOM
innerHTML: render html string + 重新創(chuàng)建所有 DOM 元素
Virtual DOM: render Virtual DOM + diff + 必要的 DOM 更新?
更加詳細(xì)介紹弛姜，請(qǐng)查看React虛擬DOM詳解
2情臭、React組件
1、創(chuàng)建組件：
1）沒(méi)有函數(shù)定義
2）ES5原生方式：React.createClass感凤，（this自動(dòng)綁定）
3）ES6形式：extends React.Component，（this來(lái)源于super()）
2粒督、組件：是React的一個(gè)特性
3陪竿、組件對(duì)于模塊化開(kāi)發(fā)的重要性
4、組件的return函數(shù)中返回的HTML節(jié)點(diǎn)有且只有一個(gè)
5屠橄、可以給外部使用的組件定義：export default class Header extends React.Component{}
6族跛、組件導(dǎo)入：import Header from “XXX文件”;
7、網(wǎng)頁(yè)入口：ReactDOM.render(組件, document.getElementById(“xxx”));
詳細(xì)代碼如下：
3锐墙、React多組件嵌套
組件可以通過(guò)參數(shù)傳遞
return中只允許一個(gè)標(biāo)簽容器礁哄，但是標(biāo)簽容器中可以存放無(wú)數(shù)個(gè)標(biāo)簽
注意項(xiàng)目的命名和文件的結(jié)構(gòu)化
代碼如下：
4、React的語(yǔ)法—JSX內(nèi)置表達(dá)式
語(yǔ)法：{userName == “” ??用戶還沒(méi)有登錄?:?用戶名：${userName}}
? ? ? 注釋的寫(xiě)法：{/按鈕/}
? ? ? HTML顯示Unicode轉(zhuǎn)碼
? ? ? HTML顯示特殊字符：dangerouslySetInnerHTML ={{__html : html}}—此方式存在XSS攻擊
JSX讀取數(shù)組的時(shí)候溪北，直接數(shù)組名桐绒，可以訪問(wèn)到所有的成員變量
JSX讀取對(duì)象時(shí)，仍然遵循對(duì)象.屬性的操作
JSX的語(yǔ)法在編譯上遵循規(guī)則：?
遇到HTML標(biāo)簽(以<開(kāi)頭)就用HTML規(guī)則解析 之拨；
遇到代碼塊(以{開(kāi)頭)就用JavaScript規(guī)則解析茉继。
代碼詳情：
5、 React的生命周期
生命周期共提供了10個(gè)不同的API（實(shí)例化5個(gè)敦锌、已加載4個(gè)馒疹、銷毀1個(gè)）佳簸。
1.getDefaultProps
作用于組件類乙墙，只調(diào)用一次，返回對(duì)象用于設(shè)置默認(rèn)的props生均，對(duì)于引用值听想，會(huì)在實(shí)例中共享。
2.getInitialState
作用于組件的實(shí)例马胧，在實(shí)例創(chuàng)建時(shí)調(diào)用一次汉买，用于初始化每個(gè)實(shí)例的state，此時(shí)可以訪問(wèn)this.props佩脊。
3.componentWillMount
在完成首次渲染之前調(diào)用蛙粘，此時(shí)仍可以修改組件的state。
4.render
必選的方法威彰，創(chuàng)建虛擬DOM出牧，該方法具有特殊的規(guī)則：
5.componentDidMount
真實(shí)的DOM被渲染出來(lái)后調(diào)用，在該方法中可通過(guò)this.getDOMNode()訪問(wèn)到真實(shí)的DOM元素歇盼。此時(shí)已可以使用其他類庫(kù)來(lái)操作這個(gè)DOM舔痕。?
在服務(wù)端中，該方法不會(huì)被調(diào)用。
6.componentWillReceiveProps
組件接收到新的props時(shí)調(diào)用伯复，并將其作為參數(shù)nextProps使用慨代，此時(shí)可以更改組件props及state。
7.shouldComponentUpdate
組件是否應(yīng)當(dāng)渲染新的props或state啸如，返回false表示跳過(guò)后續(xù)的生命周期方法侍匙，通常不需要使用以避免出現(xiàn)bug。在出現(xiàn)應(yīng)用的瓶頸時(shí)组底，可通過(guò)該方法進(jìn)行適當(dāng)?shù)膬?yōu)化丈积。?
在首次渲染期間或者調(diào)用了forceUpdate方法后，該方法不會(huì)被調(diào)用
8.componentWillUpdate
接收到新的props或者state后债鸡，進(jìn)行渲染之前調(diào)用江滨，此時(shí)不允許更新props或state。
9.componentDidUpdate
完成渲染新的props或者state后調(diào)用厌均，此時(shí)可以訪問(wèn)到新的DOM元素唬滑。
10.componentWillUnmount
組件被移除之前被調(diào)用，可以用于做一些清理工作棺弊，在componentDidMount方法中添加的所有任務(wù)都需要在該方法中撤銷晶密，比如創(chuàng)建的定時(shí)器或添加的事件監(jiān)聽(tīng)器。
具體圖解如下：?
6模她、 總結(jié)
本文主要是對(duì)React組件的書(shū)寫(xiě)以及使用作出簡(jiǎn)要介紹稻艰，具體代碼可以下載—鏈接：https://pan.baidu.com/s/1qZATfYG?密碼：7kkj
下載完畢之后，通過(guò)命令面板定位到當(dāng)前文件夾侈净，之后執(zhí)行npm install安裝所有環(huán)境尊勿，安裝完畢之后，執(zhí)行webpack –watch畜侦，項(xiàng)目即可運(yùn)行元扔。
