React學習——Day1

1. React簡介

• React起源於Facebook的內部項目，因爲該公司對市場上所有JavaScript MVC框架都不滿意，就決定自己寫一套，用來架設Instagram（照片交友）的網站。做出來以後，發現這套東西很好用，就在2013年5月開源了。
• 由於React的設計思想及其獨特，屬於革命性創新，性能出衆，代碼邏輯卻非常簡單。所以，越來越多的人開始關注和使用，認爲它可能是將來Web開發的主流工具。
• 清楚兩個概念：
  library（庫）：小而巧，只提供了特定的API；優點是船小好調頭：可以很方便的從一個庫切換到另外的庫，代碼幾乎不會改變。
  Framework（框架）：大而全，提供了一整套的解決方案；在項目中間，想切換到另外的框架，是比較困難的。

2. 前端三大主流框架

• Angular.js：出來較早的前端框架，學習曲線比較陡，NG1學起來比較麻煩，NG2~NG5開始，進行了一系列的改革，也提供了組件化開發的概念；從NG2開始，也支持使用TS（TypeScript）進行編程。
• Vue.js：最火（關注的人比較多）的一門前端框架，它是中國人開發的，對我們來說，文檔要友好一些。
• React.js：最流行（用的人比較多）的一門框架，因爲它的設計很優秀。

3. React與Vue的對比

組件化方面

• 什麼是模塊化：是從代碼的角度來進行分析的；把一些可複用的代碼，抽離爲單個的模塊；便於項目的維護和開發。
• 什麼是組件化：是從UI界面的角度來進行分析的；把一些可複用的UI元素，抽離爲單獨的組件；便於項目的維護和開發。
• 組件化的好處：隨着項目規模的增大，手裏的組件越來越多；很方便就能把現有的組件，拼接爲一個完整的頁面。
• Vue是如何實現組件化的：通過.vue文件，來創建對應的組件，包含三部分：
  template 結構
  script 行爲
  style 樣式
• React如何實現組件化：React中有組件化的概念，但是，沒有像vue這樣的組件模板文件；React中，一切都是以JS來表現的；因此要學習React，JS要合格；ES6和ES7（async和await）要會用。

開發團隊方面

• React是由FaceBook前端官方團隊進行維護和更新的；因此，React的維護開發團隊，技術實力比較雄厚。
• Vue：第一版，主要是由作者尤雨溪專門進行維護的，當Vue更新到2.x版本後，也有了一個以尤雨溪爲主導的開源小團隊，進行相關的開發和維護。

社區方面

• 在社區方面，React由於誕生的較早，所以社區比較強大，一些常見的問題、坑、最優解決方案、文檔、博客在社區中都是可以很方便就能找到的。
• Vue是近幾年才火起來的，所以，它的社區相對於React來說，要小一些，可能有的一些坑，沒人踩過。

移動APP開發體驗方面

• Vue，結合Weex這門技術，提供了遷移到移動端App開發的體驗（Weex目前只是一個小的玩具，並沒有很成功的大案例）。
• React，結合ReactNative，也提供了無縫遷移到移動App的開發體驗（RN用的最多，也是最火最流行的）。

4. 爲什麼要學習React

• 和Angular1相比，React設計很優秀，一切基於JS並且實現了組件化開發的思想。
• 開發團隊實力強悍，不必擔心斷更的情況。
• 社區強大，很多問題都能找到對應的解決方案。
• 提供了無縫轉到ReactNative上的開發體驗，讓我們技術能力得到了拓展；增強了我們的核心競爭力。
• 很多企業中，前端項目的技術選型採用的是React.js。

5. React中幾個核心的概念

虛擬DOM(Virtual Document Object Model)

DOM和虛擬DOM的區別：

• DOM：瀏覽器中的概念，用JS對象來表示頁面上的元素，並提供了操作DOM對象的API。
• 虛擬DOM：是框架中的概念，是開發框架的程序員手動用JS對象來模擬頁面上的DOM元素和DOM嵌套。
  本質：用JS對象，來模擬DOM元素和嵌套關係。
  目的：爲了實現頁面元素的高效更新。

以下代碼演示瞭如何使用JS對象來模擬DOM元素以及嵌套關係：

<div id="mydiv" title="div">
	React學習
	<p>Day1</p>
</div>
// 使用JS對象模擬以上DOM元素
var div = {
	tagName: 'div',
	attrs: {
		id: 'mydiv',
		title: 'div'
	},
	childrens: [
		'React學習',
		{
			tagName: 'p',
			attrs: {},
			childrens: [
				'Day1'
			]
		}
	]
}

Diff算法（找不同，改不同）

爲了實現DOM元素的高效按需更新，需要對比兩棵新舊DOM樹。

• tree diff：新舊兩棵DOM樹，逐層對比的過程，就是Tree Diff；當整棵DOM樹逐層對比完畢，則所有需要被按需更新的元素，必然能夠找到。
• component diff：在進行Tree Diff的時候，每一層中，組件級別的對比，叫做Component Diff。如果對比前後，組件的類型相同，則暫時認爲此組件不需要被更新；如果對比前後，組件類型不同，則需要移除舊組件，創建新組件並追加到頁面上。
• element diff：在進行組件對比的時候，如果兩個組件類型相同，則需要進行元素級別的對比，這叫做Element Diff。
  
  以上三者之間是遞進的關係。
  綜上，虛擬DOM爲我們提供了兩棵新舊DOM樹，Diff算法提供了DOM樹之間對比的最優方案。掌握了以上React中幾個核心概念之後，下面就可以進入React語法的學習了😊