React.js初探（一）

前端框架多如牛毛的今天，團隊的技術選型很重要，沒有最好的，只有最合適的，這話早已經被說爛了。

可是做爲一個有追求的前端，對新技術的敏感以及嘗試心理仍是要有的。

雖然React已經火的不行了，但因爲本身的惰性，好吧，就是懶，看了不少的技術文章，可是一直沒有開始去學習這個框架。

今天就開始這個框架的學習吧 - -。。。也做爲本博第一篇文章。。。

 

前言

 

React中，把一切東西都當作組件，每一個組件都有其狀態。

一個組件與多種有限狀態，但同時只能有一個狀態。學術上這叫有限狀態機

 

對於HTML而言，React拋棄了他。

拋棄HTML，另起爐竈的緣由之一是性能問題：DOM操做十分緩慢。

所以React引入了虛擬DOM（Virtual Dom）的概念，React在必要的時候，才把他們渲染到真正的DOM中

 

 

開始

既然選擇了開始，那固然是熟悉的味道，原來的配方： Hello React 

 

上手React十分簡單，咱們只要： 在虛擬DOM上建立元素，把他們渲染到真實DOM上

 

建立元素： createElement( type, [props], [children..] ) 

type: 建立的元素類型，能夠是 字符串 或者 一個React組件類型，爲字符串的時候，只能是標準的HTML標籤名稱，如p, div

props: 可選的JSON對象，指定元素的附加屬性，如樣式，CSS類名等，CSS類名要用className，而不是用class，由於class是JS保留字。可設置成null。

children：從第三個參數開始，都被認爲是子元素

 

下面是簡單的例子：

 

1 var el = React.createElement(
2 　　"ul",
3 　　null,
4 　　React.createElement("li",null,"China"),
5 　　React.createElement("li",null,"Japan"),
6 　　React.createElement("li",null,"Korea")
7 );

 

渲染到DOM： render( element, container, [cb] )

element：指咱們用React建立的虛擬DOM

container：真實的DOM元素，容器。

cb：渲染完成或更新後的回調，可選。

 

 

虛擬DOM

虛擬DOM是React的基石。

一方面是性能緣由，React每次渲染的時候，會先比較當前DOM內容和渲染內容的差別，而後最優的更新DOM，這個過程叫作reconciliation。

另外一方面：引入虛擬DOM，提供了一種一致的開發方式來開發服務端應用，Web應用，手機端應用。

由於有了虛擬DOM，經過配置不一樣的渲染器，就能夠將Virtual Dom的內容渲染到不一樣的平臺。對於開發者，使用JS通吃全部平臺。

 

例子：

咱們來實現一個計時器：

 1 <script>
 2 //獲取初始時間
 3 var t0 = new Date().getTime();
 4  
 5 //16ms定時器
 6 setInterval(function(){
 7 　　//獲取當前時間，計算已運行時長
 8 　　var t = new Date().getTime(),
 9 　　delta = t - t0;
10  
11 　　var el = React.createElement('p', null, delta);
12  
13 　　React.render(el, document.querySelector('#content'))
14 },16);
15 </script>

 

React組件

定義一個組件十分簡單： React.createClass(meta)

meta：是一個實現 預約義接口 的JS對象，用來對React組件原型進行擴展

 

注意：組件名稱的首字母應當 大寫。

 

建立完組件，而後就是以前的流程，建立虛擬DOM，而後渲染。

 

createClass中都要寫render方法，render方法 要返回建立的虛擬DOM。其餘的方法則要寫成駝峯式的名字，如onClick。

 

一個例子：

 

 

JSX輪子

React引入了Virtual Dom, 建立DOM數須要在JS中寫代碼，使得界面定義很繁瑣，好比建立兩排字的組件：

render: function(){
    return React.createElement(
        "div",null,
        React.createElement("div",{className:"ez-led"},"Hello, React!"),
        React.createElement("div",{className:"ez-led"},"2015-04-15")
　　);
}             

 

爲了解決上面的問題，JSX來了。

JSX是對JS語法的拓展，它可讓咱們在JS代碼中相似寫HTML的方式建立React元素

注意： CSS類名仍是要用className，React.render中的組件名要寫成標籤形式，如<EzLedComp/>

 

如：

 1 //JavaScript
 2 var e = React.createElement(
 3     "ul",null,
 4     React.createElement("li",null,"China"),
 5     React.createElement("li",null,"Japan"),
 6 );
 7 //JSX = JavaScript + XML like extension
 8 var e = <ul>
 9                 <li>China</li>
10                 <li>Japan</li>
11             </ul>;            

 

 

這樣，createElement的部分代碼就用了JSX表示，不過，這種寫法看起來有點....，固然，能夠也選擇不用JSX。

 

對於使用了JSX的腳本，script的類型須要指定爲text/jsx

1 //內聯腳本
2 <script type="text/jsx">...</script>
3 //外部腳本
4 <script src="a.js" type="text/jsx"></script>

 

 

並且須要引入JSX轉換庫， JSXTransform.js  。 這個庫加載後，將在DOM樹構建完成後，（即監聽了DOMContentLoaded事件），處理JSX腳本，步驟大致以下：

1. 搜索DOM中的script標籤，且標籤類型爲text/jsx的
2. 讀取該script內容，轉換成JS語法代碼
3. 構建一個新的script，轉換後的代碼寫入script，將該script插入head中

 

引入了JSXTransform.js後，在全局變量中會提供一個JSXTrasnform這個API接口，咱們能夠用transform() 方法模擬轉換的過程