最近參與一個(gè)項(xiàng)目中扔字，運(yùn)用了react.js來(lái)開發(fā)喂急，對(duì)于用慣DOM操作的前端來(lái)說(shuō)格嘁，改變思想來(lái)控制所謂的虛擬DOM確實(shí)有些不適應(yīng)。所以借此機(jī)會(huì)廊移，自己簡(jiǎn)單的做一個(gè)小結(jié)糕簿，如果遇到類似問(wèn)題，可以參考討論一下狡孔。（目前只考慮瀏覽器渲染懂诗，服務(wù)器端之后會(huì)總結(jié)一下）
個(gè)人感覺(jué)到的特色
- 引入了虛擬DOM的概念，安插在JavaScript邏輯（jsx）和實(shí)際的DOM之間苗膝。這一概念提高了Web性能殃恒。在UI渲染過(guò)程中，React通過(guò)在虛擬DOM中的微操作來(lái)實(shí)對(duì)現(xiàn)實(shí)際DOM的局部更新辱揭。
- react其實(shí)只有所謂的view層离唐，所以庫(kù)很輕量。但是這樣也意味著自己變異代碼的更多可能性问窃。但是數(shù)據(jù)流我還是使用了官方推薦的redux做處理亥鬓。
- 更方便的模塊化。配合es6的class寫法域庇，以及node的模塊化寫法嵌戈，能把一個(gè)一個(gè)區(qū)塊變成一個(gè)一個(gè)可以復(fù)用的組件，這樣也要求我們?cè)跁鴮戇壿嬛敖咸辏仨毟鶕?jù)項(xiàng)目需求，業(yè)務(wù)邏輯技健，提前預(yù)留好后期可能需要的功能写穴。
- 強(qiáng)大的生命周期，這樣在報(bào)錯(cuò)后更容易找到問(wèn)題所在雌贱。
- 學(xué)習(xí)成本也不是很高啊送。
適用場(chǎng)景
由于react的誕生就是feacebook為了解決前端多交互的情況下出現(xiàn)的。所以我也感覺(jué)react適合多用戶交互欣孤，多數(shù)據(jù)流變更的項(xiàng)目中馋没。
react必須了解的地方
1.生命周期
生命周期總體劃分為初始化階段（Mounting），運(yùn)行中階段（Updating）降传，銷毀階段（Unmounting）
Mounting
getDefaultProps：組件見props共享引用篷朵。
getInitialState：初始化每個(gè)組件自己特有的狀態(tài)。（就是初始state）
conponentWillMount：render之前和初始之間修改狀態(tài)的過(guò)程。
render：將虛擬DOM渲染到瀏覽器上声旺，只能訪問(wèn)this.props, this.state（es6 class寫法中笔链，this.后加 function 還可以調(diào)用類內(nèi)方法。）但是這個(gè)狀態(tài)內(nèi)最好不要修改狀態(tài)腮猖，否則容易陷入死循環(huán)鉴扫。
conponentDidMount：成功render并渲染真實(shí)DOM后觸發(fā)，可以修改DOM元素澈缺。
Updating
componentWillReceiveProps：當(dāng)組件修改屬性觸發(fā)坪创，這個(gè)狀態(tài)下可以修改屬性和狀態(tài)。（componentWillReceiveProps(nextProps){/修改狀態(tài)邏輯/}）
shouldComponentUpdate：只有true和false選擇姐赡，false會(huì)阻止render刷新莱预。
render：同上
componentDidUpdate：可以修改DOM
Unmounting
componentWillUn：在刪除組件之前進(jìn)行相關(guān)清理操作，比如計(jì)時(shí)器和監(jiān)聽器等雏吭。
2.props和state
簡(jiǎn)單的將锁施，prop就是組件之間傳遞數(shù)據(jù)所用的傳遞參數(shù)，而state是本組件改變數(shù)據(jù)用的方式杖们。而且react頁(yè)面刷新機(jī)制就是比較前后數(shù)據(jù)發(fā)生的變化悉抵，其實(shí)就是比較state是否發(fā)生改變。所以想讓頁(yè)面根據(jù)數(shù)據(jù)發(fā)生改變摘完，就要理解state和prop姥饰。
3.控制真實(shí)DOM節(jié)點(diǎn)
當(dāng)然，如果想要控制DOM元素怎么樣孝治？react也提供了一種方式--ref屬性列粪。
例子：
DOM中寫法
<input type="text" ref="myInput" />
js應(yīng)用
this.refs.myInput.focus();
先簡(jiǎn)單寫到這里，之后再慢慢補(bǔ)充谈飒。
