React心得之降龍十八掌：第一式-亢龍有悔（初步認識React的幾個概念）

引言

亢龍有悔（乾卦上九）《彖》曰：“‘亢龍，有悔’，盈不可久也。”

• 丐幫絕技之一，威力尋常。快速出招攻擊單個目標，可造成大量傷害。亢龍有悔雖然是一個瞬發技能，但卻會做出釋放技能的引導作用，耗費一定的時間。
• 我們初步認識React時，就像學習第一式一下，做到瞬發致人，因人、因地、因景，絕不可拘泥於此，學好第一式之後，接下來便可亢龍，持久。

1-React的基本認識

1.是Facebook開源的一個js庫
2. 一個用來動態構建用戶界面的js庫
3. React的特點

• Declarative(聲明式編碼)
• Component-Based(組件化編碼)
• Learn Once, Write Anywhere(支持客戶端與服務器渲染)
• 高效
• 單向數據流

4. React高效的原因

• 虛擬(virtual)DOM, 不總是直接操作DOM(批量更新, 減少更新的次數)
• 高效的DOM Diff算法, 最小化頁面重繪(減小頁面更新的區域)

2-爲什麼要學習React

• 看到網上有好多的人說React比Vue難說，學好了Vue不用學習React了，其實，關於前端框架來說，當然是在這個競爭日益激烈的社會上，多一門手藝，就多一門混跡江湖，仗劍天涯的保證對吧。
• 其實簡單的說就是賺錢，學好了React可以多賺錢，簡單粗暴
• 那麼到底什麼React呢，上面的基本認識已經說了，其實React本質上只關心兩件事：
  • 更新DOM
  • 響應事件
• React自身是不處理Ajax、路由和數據存儲，也不規定數據管理的方式，它既不是MVC框架，也不是MVVM框架，如果你非要問它是什麼，它真的就是那種…那種少見的那種，它很想MVC裏的V，但是又不全是，它的精簡直接允許你可以集成到各種各樣的系統中，總之，它真的很好用。
• 狀態數據每次改變時，需要重新渲染整個頁面，這樣就會導致頁面加載非常慢，這個其實就是DOM的讀取和更新的性能的問題，但是React使用虛擬DOM，實現了一個獨立強大的渲染系統，這就導致了React在對於DOM的操作上只更新不讀取。

React工作狀態：

• React以渲染函數爲基礎。這些函數讀入當前的狀態，將其轉換爲目標頁面上的一個虛擬表現。只要React被告知狀態有變化，他就會重新運行這些函數，計算出頁面的一個新的虛擬表現，接着自動把結果轉換成必要的DOM更新來反映新的表現。
• 這種方式看上去應該比通常的JavaScript方案——按需要更新每一個元素——要慢，但是React確實是這麼做的：它使用了非常高效的算法，計算出虛擬頁面當前版本和新版間的差異，基於這些差異對DOM進行必要的最少更新。React贏就贏在了最小化了重繪，並且避免了不必要的DOM操作，這兩點都是公認的性能瓶頸。

3-React的基本使用

1. 導入相關js庫文件(react.js, react-dom.js, babel.min.js)
2. 編碼:

   <div id="container"></div>
   	<script type="text/babel">
   		var aa = 123#  #
   		var bb = 'test'
   		ReactDOM.render(<h1 id={bb}>{aa}</h1>, containerDOM)
   	</script>
   

4-JSX的理解和使用

1. 理解

• 全稱: JavaScript XML
• react定義的一種類似於XML的JS擴展語法: XML+JS
• 作用: 用來創建react虛擬DOM(元素)對象

2. 編碼相關

• js中直接可以套標籤, 但標籤要套js需要放在{}中
• 在解析顯示js數組時, 會自動遍歷顯示
• 把數據的數組轉換爲標籤的數組:

  var liArr = dataArr.map(function(item, index){
  			return <li key={index}>{item}</li>
  		})
  

3. 注意:

• 標籤必須有結束
• 標籤的class屬性必須改爲className屬性
• 標籤的style屬性值必須爲: {{color:‘red’, width:12}}

5-幾個重要概念理解

模塊與組件

1. 模塊:

• 理解: 向外提供特定功能的js程序, 一般就是一個js文件
• 爲什麼: js代碼更多更復雜
• 作用: 複用js, 簡化js的編寫, 提高js運行效率

2. 組件:

• 理解: 用來實現特定界面功能效果的代碼集合(html/css/js/img)
• 爲什麼: 一個界面的功能太複雜了
• 作用: 複用編碼, 簡化項目界面編碼, 提高運行效率

模塊化與組件化

1. 模塊化:
   當應用的js都以模塊來編寫的, 這個應用就是一個模塊化的應用
2. 組件化:
   當應用是以多組件的方式實現功能, 這上應用就是一個組件化的應用

---

總結

要麼庸俗，要麼孤獨——叔本華

好好學React、多賺錢…(未完待續)

『傳送門』☛React心得之降龍十八掌：第二式-飛龍在天（ React組件化開發及相關概念）