一、why React好乐？
React是Facebook開(kāi)發(fā)的一款JS庫(kù)匾竿。React一般被用來(lái)作為MVC中的V層，它不依賴(lài)其他任何的庫(kù)蔚万，因此開(kāi)發(fā)中岭妖，可以與任何其他的庫(kù)集成使用，包括Jquery反璃、Backbone等昵慌。它可以在瀏覽器端運(yùn)行，也可以通過(guò)nodejs在服務(wù)端渲染淮蜈。React的思想非常獨(dú)特斋攀，性能出眾，可以寫(xiě)出重復(fù)代碼少梧田，邏輯清晰的前端代碼淳蔼。React的語(yǔ)法是jsx，通過(guò)使用這種語(yǔ)法裁眯，可以在react代碼中直接混合使用js和html來(lái)編寫(xiě)代碼鹉梨，這樣代碼的邏輯就非常清晰，當(dāng)然也意味著穿稳，需要將jsx代碼編譯成普通的javascript代碼存皂，才能在瀏覽器中運(yùn)行，這個(gè)過(guò)程根據(jù)實(shí)際項(xiàng)目情況逢艘，可以選擇多種不同的思路旦袋，或者在服務(wù)器端通過(guò)webpack進(jìn)行編譯。
ReactJS官網(wǎng)地址：http://facebook.github.io/react/
Github地址：https://github.com/facebook/react
二埋虹、對(duì)ReactJS的認(rèn)識(shí)及ReactJS的優(yōu)點(diǎn)
首先猜憎，對(duì)于React娩怎，有一些認(rèn)識(shí)誤區(qū)搔课，這里先總結(jié)一下：
React不是一個(gè)完整的MVC框架，最多可以認(rèn)為是MVC中的V（View），甚至React并不非常認(rèn)可MVC開(kāi)發(fā)模式爬泥；
React的服務(wù)器端Render能力只能算是一個(gè)錦上添花的功能柬讨，并不是其核心出發(fā)點(diǎn)，事實(shí)上React官方站點(diǎn)幾乎沒(méi)有提及其在服務(wù)器端的應(yīng)用袍啡；
有人拿React和Web Component相提并論踩官，但兩者并不是完全的競(jìng)爭(zhēng)關(guān)系，你完全可以用React去開(kāi)發(fā)一個(gè)真正的Web Component境输；
React不是一個(gè)新的模板語(yǔ)言蔗牡，JSX只是一個(gè)表象，沒(méi)有JSX的React也能工作嗅剖。
1辩越、ReactJS的背景和原理
在Web開(kāi)發(fā)中，我們總需要將變化的數(shù)據(jù)實(shí)時(shí)反應(yīng)到UI上信粮，這時(shí)就需要對(duì)DOM進(jìn)行操作黔攒。而復(fù)雜或頻繁的DOM操作通常是性能瓶頸產(chǎn)生的原因（如何進(jìn)行高性能的復(fù)雜DOM操作通常是衡量一個(gè)前端開(kāi)發(fā)人員技能的重要指標(biāo)）。React為此引入了虛擬DOM（Virtual DOM）的機(jī)制：在瀏覽器端用Javascript實(shí)現(xiàn)了一套DOM API强缘《蕉瑁基于React進(jìn)行開(kāi)發(fā)時(shí)所有的DOM構(gòu)造都是通過(guò)虛擬DOM進(jìn)行，每當(dāng)數(shù)據(jù)變化時(shí)旅掂，React都會(huì)重新構(gòu)建整個(gè)DOM樹(shù)赏胚，然后React將當(dāng)前整個(gè)DOM樹(shù)和上一次的DOM樹(shù)進(jìn)行對(duì)比，得到DOM結(jié)構(gòu)的區(qū)別商虐，然后僅僅將需要變化的部分進(jìn)行實(shí)際的瀏覽器DOM更新栅哀。而且React能夠批處理虛擬DOM的刷新，在一個(gè)事件循環(huán)（Event Loop）內(nèi)的兩次數(shù)據(jù)變化會(huì)被合并称龙，例如你連續(xù)的先將節(jié)點(diǎn)內(nèi)容從A變成B留拾，然后又從B變成A，React會(huì)認(rèn)為UI不發(fā)生任何變化鲫尊，而如果通過(guò)手動(dòng)控制痴柔，這種邏輯通常是極其復(fù)雜的。盡管每一次都需要構(gòu)造完整的虛擬DOM樹(shù)疫向，但是因?yàn)樘摂MDOM是內(nèi)存數(shù)據(jù)咳蔚，性能是極高的，而對(duì)實(shí)際DOM進(jìn)行操作的僅僅是Diff部分搔驼，因而能達(dá)到提高性能的目的谈火。這樣，在保證性能的同時(shí)，開(kāi)發(fā)者將不再需要關(guān)注某個(gè)數(shù)據(jù)的變化如何更新到一個(gè)或多個(gè)具體的DOM元素牡昆，而只需要關(guān)心在任意一個(gè)數(shù)據(jù)狀態(tài)下，整個(gè)界面是如何Render的格嘁。
如果你像在90年代那樣寫(xiě)過(guò)服務(wù)器端Render的純Web頁(yè)面那么應(yīng)該知道温技，服務(wù)器端所要做的就是根據(jù)數(shù)據(jù)Render出HTML送到瀏覽器端革为。如果這時(shí)因?yàn)橛脩?hù)的一個(gè)點(diǎn)擊需要改變某個(gè)狀態(tài)文字，那么也是通過(guò)刷新整個(gè)頁(yè)面來(lái)完成的舵鳞。服務(wù)器端并不需要知道是哪一小段HTML發(fā)生了變化震檩，而只需要根據(jù)數(shù)據(jù)刷新整個(gè)頁(yè)面。換句話(huà)說(shuō)蜓堕，任何UI的變化都是通過(guò)整體刷新來(lái)完成的抛虏。而React將這種開(kāi)發(fā)模式以高性能的方式帶到了前端，每做一點(diǎn)界面的更新套才，你都可以認(rèn)為刷新了整個(gè)頁(yè)面嘉蕾。至于如何進(jìn)行局部更新以保證性能，則是React框架要完成的事情霜旧。
借用Facebook介紹React的視頻中聊天應(yīng)用的例子错忱，當(dāng)一條新的消息過(guò)來(lái)時(shí)，傳統(tǒng)開(kāi)發(fā)的思路如上圖挂据，你的開(kāi)發(fā)過(guò)程需要知道哪條數(shù)據(jù)過(guò)來(lái)了以清，如何將新的DOM結(jié)點(diǎn)添加到當(dāng)前DOM樹(shù)上；而基于React的開(kāi)發(fā)思路如下圖崎逃，你永遠(yuǎn)只需要關(guān)心數(shù)據(jù)整體掷倔，兩次數(shù)據(jù)之間的UI如何變化，則完全交給框架去做个绍±沾校可以看到，使用React大大降低了邏輯復(fù)雜性巴柿，意味著開(kāi)發(fā)難度降低凛虽，可能產(chǎn)生Bug的機(jī)會(huì)也更少。
2广恢、組件化
虛擬DOM(virtual-dom)不僅帶來(lái)了簡(jiǎn)單的UI開(kāi)發(fā)邏輯凯旋，同時(shí)也帶來(lái)了組件化開(kāi)發(fā)的思想，所謂組件钉迷，即封裝起來(lái)的具有獨(dú)立功能的UI部件至非。React推薦以組件的方式去重新思考UI構(gòu)成，將UI上每一個(gè)功能相對(duì)獨(dú)立的模塊定義成組件糠聪，然后將小的組件通過(guò)組合或者嵌套的方式構(gòu)成大的組件荒椭，最終完成整體UI的構(gòu)建。例如舰蟆，F(xiàn)acebook的instagram.com整站都采用了React來(lái)開(kāi)發(fā)趣惠，整個(gè)頁(yè)面就是一個(gè)大的組件狸棍，其中包含了嵌套的大量其它組件，大家有興趣可以看下它背后的代碼信卡。
如果說(shuō)MVC的思想讓你做到視圖-數(shù)據(jù)-控制器的分離隔缀，那么組件化的思考方式則是帶來(lái)了UI功能模塊之間的分離题造。我們通過(guò)一個(gè)典型的Blog評(píng)論界面來(lái)看MVC和組件化開(kāi)發(fā)思路的區(qū)別傍菇。
對(duì)于MVC開(kāi)發(fā)模式來(lái)說(shuō)，開(kāi)發(fā)者將三者定義成不同的類(lèi)界赔，實(shí)現(xiàn)了表現(xiàn)丢习，數(shù)據(jù)，控制的分離淮悼。開(kāi)發(fā)者更多的是從技術(shù)的角度來(lái)對(duì)UI進(jìn)行拆分咐低，實(shí)現(xiàn)松耦合。
對(duì)于React而言袜腥，則完全是一個(gè)新的思路见擦，開(kāi)發(fā)者從功能的角度出發(fā)，將UI分成不同的組件羹令，每個(gè)組件都獨(dú)立封裝鲤屡。
在React中，你按照界面模塊自然劃分的方式來(lái)組織和編寫(xiě)你的代碼福侈，對(duì)于評(píng)論界面而言酒来，整個(gè)UI是一個(gè)通過(guò)小組件構(gòu)成的大組件，每個(gè)組件只關(guān)心自己部分的邏輯肪凛，彼此獨(dú)立堰汉。
React認(rèn)為一個(gè)組件應(yīng)該具有如下特征：
（1）可組合（Composeable）：一個(gè)組件易于和其它組件一起使用，或者嵌套在另一個(gè)組件內(nèi)部伟墙。如果一個(gè)組件內(nèi)部創(chuàng)建了另一個(gè)組件翘鸭，那么說(shuō)父組件擁有（own）它創(chuàng)建的子組件，通過(guò)這個(gè)特性戳葵，一個(gè)復(fù)雜的UI可以拆分成多個(gè)簡(jiǎn)單的UI組件矮固；
（2）可重用（Reusable）：每個(gè)組件都是具有獨(dú)立功能的，它可以被使用在多個(gè)UI場(chǎng)景譬淳；
（3）可維護(hù)（Maintainable）：每個(gè)小的組件僅僅包含自身的邏輯档址，更容易被理解和維護(hù)；
三邻梆、下載ReactJS守伸，編寫(xiě)Hello，world
ReactJs下載非常簡(jiǎn)單浦妄，為了方便大家下載尼摹，這里再一次給出下載地址（鏈接）,下載完成后见芹，我么看到的是一個(gè)壓縮包。解壓后蠢涝，我們新建一個(gè)html文件玄呛，引用react.js和JSXTransformer.js這兩個(gè)js文件。html模板如下(js路徑改成自己的):
這里大家可能會(huì)奇怪和二，為什么script的type是text/jsx,這是因?yàn)?React 獨(dú)有的 JSX 語(yǔ)法徘铝，跟 JavaScript 不兼容。凡是使用 JSX 的地方惯吕，都要加上 type="text/jsx" 惕它。 其次，React 提供兩個(gè)庫(kù)： react.js 和 JSXTransformer.js 废登，它們必須首先加載淹魄。其中，JSXTransformer.js 的作用是將 JSX 語(yǔ)法轉(zhuǎn)為 JavaScript 語(yǔ)法堡距。這一步很消耗時(shí)間甲锡，實(shí)際上線(xiàn)的時(shí)候，應(yīng)該將它放到服務(wù)器完成羽戒。
到這里我們就可以開(kāi)始編寫(xiě)代碼了缤沦，首先我們先來(lái)認(rèn)識(shí)一下ReactJs里面的React.render方法：
React.render 是 React 的最基本方法，用于將模板轉(zhuǎn)為 HTML 語(yǔ)言半醉，并插入指定的 DOM 節(jié)點(diǎn)疚俱。
下面我們?cè)趕cript標(biāo)簽里面編寫(xiě)代碼，來(lái)輸出Hello缩多，world呆奕，代碼如下：
這里需要注意的是，react并不依賴(lài)jQuery衬吆，當(dāng)然我們可以使用jQuery梁钾，但是render里面第二個(gè)參數(shù)必須使用JavaScript原生的getElementByID方法，不能使用jQuery來(lái)選取DOM節(jié)點(diǎn)逊抡。
然后姆泻，在瀏覽器打開(kāi)這個(gè)頁(yè)面，就可以看到瀏覽器顯示一個(gè)大大的Hello冒嫡，world,因?yàn)槲覀冇昧?/p>
標(biāo)簽拇勃。
到這里，恭喜孝凌，你已經(jīng)步入了ReactJS的大門(mén)~~下面方咆，讓我們來(lái)進(jìn)一步學(xué)習(xí)ReactJs吧~~
四、Jsx語(yǔ)法
HTML 語(yǔ)言直接寫(xiě)在 JavaScript 語(yǔ)言之中蟀架，不加任何引號(hào)瓣赂，這就是 JSX 的語(yǔ)法榆骚，它允許 HTML 與 JavaScript 的混寫(xiě)，了解過(guò)AngularJs的看到下面的代碼一定會(huì)感覺(jué)很熟悉的煌集，我們來(lái)看代碼：
這里我們聲明了一個(gè)names數(shù)組妓肢，然后遍歷在前面加上Hello,輸出到DOM中，輸出結(jié)果如下：
JSX 允許直接在模板插入 JavaScript 變量苫纤。如果這個(gè)變量是一個(gè)數(shù)組碉钠，則會(huì)展開(kāi)這個(gè)數(shù)組的所有成員，代碼如下：
顯示結(jié)果如下：
這里的星號(hào)只是做標(biāo)識(shí)用的方面，大家不要被迷惑了~~
你看到這里放钦，說(shuō)明你對(duì)React還是蠻感興趣的色徘，恭喜你恭金，堅(jiān)持下來(lái)了，那么下面褂策，我們開(kāi)始學(xué)習(xí)React里面的"真功夫"了~~ Are you ready?
五横腿、ReactJS組件
1、組件屬性
前面說(shuō)了斤寂，ReactJS是基于組件化的開(kāi)發(fā)耿焊，下面我們開(kāi)始來(lái)學(xué)習(xí)ReactJS里面的組件，React 允許將代碼封裝成組件（component）遍搞，然后像插入普通 HTML 標(biāo)簽一樣罗侯，在網(wǎng)頁(yè)中插入這個(gè)組件。React.createClass 方法就用于生成一個(gè)組件類(lèi)溪猿。
下面钩杰，我們來(lái)編寫(xiě)第一個(gè)組件Greet，有一個(gè)name屬性诊县，然后輸出hello + name的值讲弄，代碼如下：
看到這段代碼，接觸過(guò)AngularJS的朋友們是不是有一種熟悉的感覺(jué)依痊，不過(guò)這里有幾點(diǎn)需要注意：
1）獲取屬性的值用的是this.props.屬性名
2）創(chuàng)建的組件名稱(chēng)首字母必須大寫(xiě)避除。
3）為元素添加css的class時(shí)，要用className胸嘁。
4）組件的style屬性的設(shè)置方式也值得注意瓶摆，要寫(xiě)成style={{width: this.state.witdh}}。
2性宏、組件狀態(tài)
組件免不了要與用戶(hù)互動(dòng)群井，React 的一大創(chuàng)新，就是將組件看成是一個(gè)狀態(tài)機(jī)衔沼，一開(kāi)始有一個(gè)初始狀態(tài)蝌借，然后用戶(hù)互動(dòng)昔瞧，導(dǎo)致?tīng)顟B(tài)變化，從而觸發(fā)重新渲染 UI 菩佑。下面我們來(lái)編寫(xiě)一個(gè)小例子自晰，一個(gè)文本框和一個(gè)button，通過(guò)點(diǎn)擊button可以改變文本框的編輯狀態(tài)稍坯，禁止編輯和允許編輯酬荞。通過(guò)這個(gè)例子來(lái)理解ReactJS的狀態(tài)機(jī)制。先看代碼：
這里瞧哟，我們又使用到了一個(gè)方法getInitialState,這個(gè)函數(shù)在組件初始化的時(shí)候執(zhí)行混巧，必需返回NULL或者一個(gè)對(duì)象。這里我們可以通過(guò)this.state.屬性名來(lái)訪問(wèn)屬性值勤揩，這里我們將enable這個(gè)值跟input的disabled綁定咧党，當(dāng)要修改這個(gè)屬性值時(shí)，要使用setState方法陨亡。我們聲明handleClick方法傍衡，來(lái)綁定到button上面，實(shí)現(xiàn)改變state.enable的值负蠕。效果如下：
原理分析：
當(dāng)用戶(hù)點(diǎn)擊組件蛙埂，導(dǎo)致?tīng)顟B(tài)變化，this.setState 方法就修改狀態(tài)值遮糖，每次修改以后绣的，自動(dòng)調(diào)用 this.render 方法，再次渲染組件欲账。
這里值得注意的幾點(diǎn)如下：
1）getInitialState函數(shù)必須有返回值屡江，可以是NULL或者一個(gè)對(duì)象。
2）訪問(wèn)state的方法是this.state.屬性名敬惦。
3）變量用{}包裹盼理，不需要再加雙引號(hào)。
3俄删、組件的生命周期
組件的生命周期分成三個(gè)狀態(tài)：
Mounting：已插入真實(shí) DOM
Updating：正在被重新渲染
Unmounting：已移出真實(shí) DOM
React 為每個(gè)狀態(tài)都提供了兩種處理函數(shù)宏怔，will 函數(shù)在進(jìn)入狀態(tài)之前調(diào)用，did 函數(shù)在進(jìn)入狀態(tài)之后調(diào)用畴椰，三種狀態(tài)共計(jì)五種處理函數(shù)臊诊。
componentWillMount()
componentDidMount()
componentWillUpdate(object nextProps, object nextState)
componentDidUpdate(object prevProps, object prevState)
componentWillUnmount()
此外，React 還提供兩種特殊狀態(tài)的處理函數(shù)斜脂。
componentWillReceiveProps(object nextProps)：已加載組件收到新的參數(shù)時(shí)調(diào)用
shouldComponentUpdate(object nextProps, object nextState)：組件判斷是否重新渲染時(shí)調(diào)用
下面來(lái)看一個(gè)例子：
上面代碼在hello組件加載以后抓艳，通過(guò) componentDidMount 方法設(shè)置一個(gè)定時(shí)器，每隔100毫秒帚戳，就重新設(shè)置組件的透明度玷或，從而引發(fā)重新渲染儡首。
4、組件的嵌套
React是基于組件化的開(kāi)發(fā)偏友，那么組件化開(kāi)發(fā)最大的優(yōu)點(diǎn)是什么蔬胯？毫無(wú)疑問(wèn)，當(dāng)然是復(fù)用位他，下面我們來(lái)看看React中到底是如何實(shí)現(xiàn)組件的復(fù)用的氛濒，這里我們還寫(xiě)一個(gè)例子來(lái)說(shuō)吧，代碼如下：
這里我們創(chuàng)建了一個(gè)Search組件鹅髓，然后又創(chuàng)建了一個(gè)Page組件舞竿，然后我們?cè)赑age組件中調(diào)用Search組件，并且調(diào)用了兩次窿冯，這里我們通過(guò)屬性searchType傳入值骗奖，最終顯示結(jié)果如圖：
六、ReactJS小結(jié)
關(guān)于ReactJS今天就先學(xué)習(xí)到這里了靡菇，下面來(lái)總結(jié)一下重归，主要有以下幾點(diǎn)：
1米愿、ReactJs是基于組件化的開(kāi)發(fā)厦凤，所以最終你的頁(yè)面應(yīng)該是由若干個(gè)小組件組成的大組件。
2育苟、可以通過(guò)屬性较鼓，將值傳遞到組件內(nèi)部，同理也可以通過(guò)屬性將內(nèi)部的結(jié)果傳遞到父級(jí)組件(留給大家研究)违柏；要對(duì)某些值的變化做DOM操作的博烂，要把這些值放到state中。
3漱竖、為組件添加外部css樣式時(shí)禽篱，類(lèi)名應(yīng)該寫(xiě)成className而不是class;添加內(nèi)部樣式時(shí)，應(yīng)該是style={{opacity: this.state.opacity}}而不是style="opacity:{this.state.opacity};"馍惹。
4躺率、組件名稱(chēng)首字母必須大寫(xiě)。
5万矾、變量名用{}包裹悼吱，且不能加雙引號(hào)。
七良狈、參考資料
