ReactJS簡(jiǎn)介

React 起源于 Facebook 的內(nèi)部項(xiàng)目，因?yàn)樵摴緦?duì)市場(chǎng)上所有 JavaScript MVC 框架，都不滿意，就決定自己寫(xiě)一套，用來(lái)架設(shè) Instagram 的網(wǎng)站。做出來(lái)以后，發(fā)現(xiàn)這套東西很好用，就在2013年5月開(kāi)源了。由于 React 的設(shè)計(jì)思想極其獨(dú)特，屬于革命性創(chuàng)新，性能出眾，代碼邏輯卻非常簡(jiǎn)單。所以，越來(lái)越多的人開(kāi)始關(guān)注和使用，認(rèn)為它可能是將來(lái) Web 開(kāi)發(fā)的主流工具。

對(duì)ReactJS的認(rèn)識(shí)及ReactJS的優(yōu)點(diǎn)

• 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)生的原因。React為此引入了虛擬DOM的機(jī)制：在瀏覽器端用Javascript實(shí)現(xiàn)了一套DOM API?；赗eact進(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的。

基于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不僅帶來(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)建。

如果說(shuō)MVC的思想讓你做到視圖-數(shù)據(jù)-控制器的分離，那么組件化的思考方式則是帶來(lái)了UI功能模塊之間的分離。

React完全是一個(gè)新的思路，開(kāi)發(fā)者從功能的角度出發(fā)，將UI分成不同的組件，每個(gè)組件都獨(dú)立封裝。

整個(gè)UI是一個(gè)通過(guò)小組件構(gòu)成的大組件，每個(gè)組件只關(guān)心自己部分的邏輯，彼此獨(dú)立。

一個(gè)組件應(yīng)該具有如下特征：

• 可組合：一個(gè)組件易于和其它組件一起使用，或者嵌套在另一個(gè)組件內(nèi)部。如果一個(gè)組件內(nèi)部創(chuàng)建了另一個(gè)組件，那么說(shuō)父組件擁有它創(chuàng)建的子組件，通過(guò)這個(gè)特性，一個(gè)復(fù)雜的UI可以拆分成多個(gè)簡(jiǎn)單的UI組件；

• 可重用：每個(gè)組件都是具有獨(dú)立功能的，它可以被使用在多個(gè)UI場(chǎng)景；

• 可維護(hù)：每個(gè)小的組件僅僅包含自身的邏輯，更容易被理解和維護(hù)；