 |
VOOZH | about |
|
VOOZH | about |
一、ReactJS簡介
React 起源於 Facebook 的內部項目，因為該公司對市場上所有 JavaScript MVC 框架，都不滿意，就決定自己寫一套，用來架設 Instagram 的網站。做出來以後，發現這套東西很好用，就在2013年5月開源了。由於 React 的設計思想極其獨特，屬於革命性創新，性能出眾，代碼邏輯卻非常簡單。所以，越來越多的人開始關注和使用，認為它可能是將來 Web 開發的主流工具。它吸引大家關注的主要原因有兩點：
可以基於 React Native使用 JavaScript 編寫應用邏輯，UI 則可以保持全是原生的。這樣的話就沒有必要就 HTML5 的 UI 做出常見的妥協；
React 引入了一種與眾不同的、略顯激進但具備高可用性的方案來構建用戶界面。長話短說，應用的 UI 簡單通過一個基於應用目前狀態的函數來表達。
React Native 的關鍵就是，以把 React 編程模式的能力帶到移動開發來作為主要目標。它的目標不是跨平台一次編寫到處執行，而是一次學習跨平台開發。這個是一個非常大的區別。這篇教程只介紹 iOS 平台，不過你一旦掌握了相關的概念，就可以應用到 Android 平台，快速構建 Android 應用。
如果之前只用過 Objective-C 或者 Swift 寫應用的話，你很可能不會對使用 JavaScript 來編寫應用的願景感到興奮。儘管如此，作為一個 Swift 開發者來說，上面提到的第二點應該可以激起你的興趣！
你通過 Swift，毫無疑問學習到了新的更多有效的編碼方法和技巧，鼓勵轉換和不變性。然而，構建 UI 的方式還是和使用 Objective-C 的方式一致。仍然以 UIKit 為基礎，獨斷專橫。
通過像 virtual DOM 和 reconciliation 這些有趣的概念，React 將函數式編程直接帶到了 UI 層。
ReactJS官網地址：
Github地址：
二、ReactJS的基本介紹
首先，對於React，有一些認識誤區，這裡先總結一下：
React不是一個完整的MVC框架，最多可以認為是MVC中的V（View），甚至React並不非常認可MVC開發模式；
React的伺服器端Render能力只能算是一個錦上添花的功能，並不是其核心出發點，事實上React官方站點幾乎沒有提及其在伺服器端的應用；
有人拿React和Web Component相提並論，但兩者並不是完全的競爭關係，你完全可以用React去開發一個真正的Web Component；
React不是一個新的模板語言，JSX只是一個表象，沒有JSX的React也能工作。
1、ReactJS的背景和原理
在Web開發中，我們總需要將變化的數據實時反應到UI上，這時就需要對DOM進行操作。而複雜或頻繁的DOM操作通常是性能瓶頸產生的原因（如何進行高性能的複雜DOM操作通常是衡量一個前端開發人員技能的重要指標）。React為此引入了虛擬DOM（Virtual DOM）的機制：在瀏覽器端用Javascript實現了一套DOM API。基於React進行開發時所有的DOM構造都是通過虛擬DOM進行，每當數據變化時，React都會重新構建整個DOM樹，然後React將當前整個DOM樹和上一次的DOM樹進行對比，得到DOM結構的區別，然後僅僅將需要變化的部分進行實際的瀏覽器DOM更新。而且React能夠批處理虛擬DOM的刷新，在一個事件循環（Event Loop）內的兩次數據變化會被合併，例如你連續的先將節點內容從A變成B，然後又從B變成A，React會認為UI不發生任何變化，而如果通過手動控制，這種邏輯通常是極其複雜的。儘管每一次都需要構造完整的虛擬DOM樹，但是因為虛擬DOM是內存數據，性能是極高的，而對實際DOM進行操作的僅僅是Diff部分，因而能達到提高性能的目的。這樣，在保證性能的同時，開發者將不再需要關注某個數據的變化如何更新到一個或多個具體的DOM元素，而只需要關心在任意一個數據狀態下，整個界面是如何Render的。
如果你像在90年代那樣寫過伺服器端Render的純Web頁面那麼應該知道，伺服器端所要做的就是根據數據Render出HTML送到瀏覽器端。如果這時因為用戶的一個點擊需要改變某個狀態文字，那麼也是通過刷新整個頁面來完成的。伺服器端並不需要知道是哪一小段HTML發生了變化，而只需要根據數據刷新整個頁面。換句話說，任何UI的變化都是通過整體刷新來完成的。而React將這種開發模式以高性能的方式帶到了前端，每做一點界面的更新，你都可以認為刷新了整個頁面。至於如何進行局部更新以保證性能，則是React框架要完成的事情。
借用Facebook介紹React的視頻中聊天應用的例子，當一條新的消息過來時，傳統開發的思路如上圖，你的開發過程需要知道哪條數據過來了，如何將新的DOM結點添加到當前DOM樹上；而基於React的開發思路如下圖，你永遠只需要關心數據整體，兩次數據之間的UI如何變化，則完全交給框架去做。可以看到，使用React大大降低了邏輯複雜性，意味著開發難度降低，可能產生Bug的機會也更少。
2、組件化
虛擬DOM(virtual-dom)不僅帶來了簡單的UI開發邏輯，同時也帶來了組件化開發的思想，所謂組件，即封裝起來的具有獨立功能的UI部件。React推薦以組件的方式去重新思考UI構成，將UI上每一個功能相對獨立的模塊定義成組件，然後將小的組件通過組合或者嵌套的方式構成大的組件，最終完成整體UI的構建。例如，Facebook的整站都採用了React來開發，整個頁面就是一個大的組件，其中包含了嵌套的大量其它組件，大家有興趣可以看下它背後的代碼。
如果說MVC的思想讓你做到視圖-數據-控制器的分離，那麼組件化的思考方式則是帶來了UI功能模塊之間的分離。我們通過一個典型的Blog評論界面來看MVC和組件化開發思路的區別。
對於MVC開發模式來說，開發者將三者定義成不同的類，實現了表現，數據，控制的分離。開發者更多的是從技術的角度來對UI進行拆分，實現鬆耦合。
對於React而言，則完全是一個新的思路，開發者從功能的角度出發，將UI分成不同的組件，每個組件都獨立封裝。
在React中，你按照界面模塊自然劃分的方式來組織和編寫你的代碼，對於評論界面而言，整個UI是一個通過小組件構成的大組件，每個組件只關心自己部分的邏輯，彼此獨立。
React認為一個組件應該具有如下特徵：
（1）可組合（Composeable）：一個組件易於和其它組件一起使用，或者嵌套在另一個組件內部。如果一個組件內部創建了另一個組件，那麼說父組件擁有（own）它創建的子組件，通過這個特性，一個複雜的UI可以拆分成多個簡單的UI組件；
（2）可重用（Reusable）：每個組件都是具有獨立功能的，它可以被使用在多個UI場景；
（3）可維護（Maintainable）：每個小的組件僅僅包含自身的邏輯，更容易被理解和維護；
三、下載及程序編寫
下載地址http://facebook.github.io/react/downloads.html,下載完成後是一個壓縮包。解壓後新建一個html文件，引用react.js和JSXTransformer.js這兩個js文件。html模板如下(js路徑改成自己的):
<!DOCTYPE html>
<html>
<head>
<script src="build/react.js"></script>
<script src="build/JSXTransformer.js"></script>
</head>
<body>
<div id="container"></div>
<script type="text/jsx">
// ** Our code goes here! **
</script>
</body>
</html>
JSX是 React 獨有的 語法，跟 JavaScript 不兼容。凡是使用 JSX 的地方，都要加上 type="text/jsx" 。 其次，React 提供兩個庫： react.js 和 JSXTransformer.js ，它們必須首先加載。其中，JSXTransformer.js 的作用是將 JSX 語法轉為 JavaScript 語法。這一步很消耗時間，實際上線的時候，應該將它放到伺服器完成。
到這裡我們就可以開始編寫代碼了，首先我們先來認識一下ReactJs裡面的React.render方法：
React.render 是 React 的最基本方法，用於將模板轉為 HTML 語言，並插入指定的 DOM 節點。
下面我們在script標籤裡面編寫代碼，來輸出Hello，world，代碼如下：
React.render(
<h1>Hello, world!</h1>,
document.getElementById('container')
);
這裡需要注意的是，react並不依賴jQuery，當然我們可以使用jQuery，但是render裡面第二個參數必須使用JavaScript原生的getElementByID方法，不能使用jQuery來選取DOM節點。
然後，就可以看到瀏覽器顯示一個大大的Hello，world。
到這裡，恭喜，你已經步入了ReactJS的大門