React.js的認識

1、ReactJS簡介

React 起源於 Facebook 的內部項目，由於該公司對市場上全部 JavaScript MVC 框架，都不滿意，就決定本身寫一套，用來架設 Instagram 的網站。作出來之後，發現這套東西很好用，就在2013年5月開源了。因爲 React 的設計思想極其獨特，屬於革命性創新，性能出衆，代碼邏輯卻很是簡單。因此，愈來愈多的人開始關注和使用，認爲它多是未來 Web 開發的主流工具。

2、對ReactJS的認識及ReactJS的優勢

首先，對於React，有一些認識誤區，這裏先總結一下：

• React不是一個完整的MVC框架，最多能夠認爲是MVC中的V（View），甚至React並不很是承認MVC開發模式；

• React的服務器端Render能力只能算是一個錦上添花的功能，並非其核心出發點，事實上React官方站點幾乎沒有說起其在服務器端的應用；

• 有人拿React和Web Component相提並論，但二者並非徹底的競爭關係，你徹底能夠用React去開發一個真正的Web Component；

• React不是一個新的模板語言，JSX只是一個表象，沒有JSX的React也能工做。

一、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的。

二、組件化

虛擬DOM(virtual-dom)不只帶來了簡單的UI開發邏輯，同時也帶來了組件化開發的思想，所謂組件，即封裝起來的具備獨立功能的UI部件。React推薦以組件的方式去從新思考UI構成，將UI上每個功能相對獨立的模塊定義成組件，而後將小的組件經過組合或者嵌套的方式構成大的組件，最終完成總體UI的構建。例如，Facebook的instagram.com整站都採用了React來開發，整個頁面就是一個大的組件，其中包含了嵌套的大量其它組件，你們有興趣能夠看下它背後的代碼。

React認爲一個組件應該具備以下特徵：

（1）可組合（Composeable）：一個組件易於和其它組件一塊兒使用，或者嵌套在另外一個組件內部。若是一個組件內部建立了另外一個組件，那麼說父組件擁有（own）它建立的子組件，經過這個特性，一個複雜的UI能夠拆分紅多個簡單的UI組件；

（2）可重用（Reusable）：每一個組件都是具備獨立功能的，它能夠被使用在多個UI場景；

（3）可維護（Maintainable）：每一個小的組件僅僅包含自身的邏輯，更容易被理解和維護；

　　

var a = React.createClass();
	name:"小強"，
	render:function(){
		return <h3>hello!{this.name}</h3>
	}
	
	ReactDom.render(
		</a>
		document.getElementById("content")
	)

　　這裏須要注意的是，react並不依賴jQuery，固然咱們可使用jQuery，可是render裏面第二個參數必須使用JavaScript原生的getElementByID方法，不能使用jQuery來選取DOM節點。