React.js學習之理解JSX和組件

　　在開啓JSX的學習旅程前，咱們先了解一下React的基本原理。React本質上是一個"狀態機"，它只關心兩件事：更新DOM和響應事件，React不處理Ajax、路由和數據存儲，也不規定數據組織的方式。它不是一個MVC的框架，只是MVC裏的"V"。

　　在每次狀態改變時，使用JavaScript從新渲染整個頁面會異常慢，這應該歸咎於讀取和更新DOM的性能問題。React使用虛擬DOM實現了一個很是強大的渲染系統，在React中對DOM只更新不讀取。React以渲染函數爲基礎，讀取當前的狀態，將其轉換爲目標頁面的一個虛擬表現，它採用了很是高效的算法，計算出虛擬頁面當前版本和新版本的差別，基於這些差別對DOM進行必要的最少更新。

　　React的優點在於最小化重繪，並避免了沒必要要的DOM操做。

1 初識JSX

　　JSX(JavaScript XML)，是一種在React組件內部構建標籤的類XML語法。相比JS中嵌入HTML標籤，JSX有如下幾個明顯的特徵：

　　1.JSX是一種句法變換——每個JSX節點都對應一個JavaScript函數；

　　2.JSX既不提供也不須要運行時庫；

　　3.JSX並無改變或添加JavaScript的語義——它只是簡單的函數調用。

　　使用JSX的好處：更加熟悉，更加語義化，更加直觀，抽象化，關注點分離。

2 JSX練習

2.1 定義一個自定義組件

　　React中經過React.createClass定義自定義組件。React組件實現了一個render()方法，該方法接受輸入數據並返回要顯示的內容。本例採用了類XML語法JSX。render()方法經過this.props來獲取傳遞給組件的輸入數據。　　

 1 var HelloWorld = React.createClass({
 2     render: function () {
 3         return <div>hello {this.props.name}</div>
 4     }
 5 });
 6 
 7 ReactDOM.render(
 8     <HelloWorld name="wulei"/>,
 9     document.getElementById('example')
10 );

　　使用react-tools編譯後的js代碼以下：

 1 var HelloWorld = React.createClass({displayName: "HelloWorld",
 2     render: function () {
 3         return React.createElement("div", null, "hello ", this.props.name)
 4     }
 5 });
 6 
 7 ReactDOM.render(
 8     React.createElement(HelloWorld, {name: "wulei"}),
 9     document.getElementById('example')
10 );

　　對比會發現，使用JSX後代碼變得更熟悉且簡潔。

2.2 使用動態值

　　JSX將兩個花括號之間的內容渲染爲動態值，花括號指明瞭一個JavaScript的上下文環境，在花括號中的內容會被進行求值，求值獲得的結果會被渲染爲標籤中的若干節點。對於簡單值，好比文本或者數字，能夠直接引用對應的變量；對於更復雜的邏輯，能夠將其轉換爲一個函數進行求值。

 1 var dynamicText = "test Me!";
 2 
 3 var HelloWorld = React.createClass({
 4     getName: function () {
 5         return "wulei";
 6     },
 7     render: function () {
 8         return <div>hello {this.getName()}, {dynamicText}</div>
 9     }
10 });
11 
12 ReactDOM.render(
13     <HelloWorld name="wulei"/>,
14     document.getElementById('example')
15 );

2.3 子節點

　　React將開始標籤與結束標籤之間的全部子節點保存在一個名爲this.props.children的特殊組件屬性中。例如在HelloWorld組件中，咱們能夠把<HelloWorld>標籤中的子節點渲染出來，這裏咱們能夠像使用HTML元素同樣使用HelloWord組件。

 1 var HelloWorld = React.createClass({
 2     getName: function () {
 3         return "wulei";
 4     },
 5     render: function () {
 6         return <div>hello {this.props.children}</div>
 7     }
 8 });
 9 
10 ReactDOM.render(
11     <HelloWorld name="wulei">I am child!</HelloWorld>,
12     document.getElementById('example')
13 );

 　　運行結果能夠看到子節點被成功地渲染。 

 

2.4 屬性

　　與HTML相似，JSX中之內聯的方式設置節點屬性，同時還提供了將屬性設置爲動態JavaScript變量的便利，設置動態屬性方法同2.2動態值。

2.5 非DOM屬性

　　JSX提供了三個特殊的非DOM屬性：

　　鍵（key）：獨一無二，確保在渲染週期保持一致，使得React可以更智能地決定該重用一個組件仍是銷燬並從新建立一個新的組件進而提高渲染性能。

　　引用（ref）：容許父組件在render方法外保持對子組件的一個引用。

　　設置原始的HTML(dangerouslySetInnerHTML)：將HTML內容設置爲字符串。

2.6 事件

　　事件名統一用駝峯形式表示，如onChange，onClick。

 1 var HelloWorld = React.createClass({
 2     getName: function () {
 3         return "wulei";
 4     },
 5     handleClick: function(event){
 6         alert("clicked!");
 7     },
 8     render: function () {
 9         return <div onClick={this.handleClick}>hello {this.props.children}</div>
10     }
11 });
12 
13 ReactDOM.render(
14     <HelloWorld name="wulei">I am child!</HelloWorld>,
15     document.getElementById('example')
16 );

2.7 樣式

　　React把全部的內聯樣式都規範化爲駝峯形式，與JavaScript中DOM的style屬性一致。

3 須要注意的問題

　　1.React能夠渲染HTML標籤(strings)或React組件(classes)，要渲染HTML標籤，只需在JSX裏使用小寫字母開頭的標籤名；要渲染React組件，只需建立一個以大寫字母開頭的本地變量。

　　2.因爲JSX會轉換爲原生的JavaScript，所以有一些關鍵詞不建議做爲JSX標籤的屬性名，如for(用htmlFor替代)和class(用className替代)。

　　2.在使用條件判斷時，在JSX的花括號中直接加入if語句會渲染出無效的JavaScript。

　　解決方法：1>使用三目運算符，2>設置一個變量並在屬性中引用它，3>將邏輯轉換到函數中，4>使用&&運算符。