React的初步探索

1. React介紹

• React 起源於 Facebook 的內部項目，因爲該公司對市場上所有 JavaScript MVC 框架，都不滿意，就決定自己寫一套，用來架設 Instagram（照片交友） 的網站。
• 庫與框架的區別
  • library（庫）：小而巧的庫，只提供了特定的API；優點就是 船小好掉頭，可以很方便的從一個庫切換到另外的庫；但是代碼幾乎不會改變；
  • Framework（框架）：大而全的是框架；框架提供了一整套的解決方案；所以，如果在項目中間，想切換到另外的框架，是比較困難的；

2. 前端三大主流框架

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

3. React與vue的對比

組件化方面

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

開發團隊方面

• React是由FaceBook前端官方團隊進行維護和更新的；因此，React的維護開發團隊，技術實力比較雄厚；
• Vue：以 尤雨溪 爲主導的開源小團隊，進行相關的開發和維護；

社區方面

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

移動APP開發體驗方面

• Vue，結合 Weex 這門技術，提供了 遷移到 移動端App開發的體驗
• React，結合 ReactNative，也提供了無縫遷移到 移動App的開發體驗

4. 爲什麼要學習React

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

5. React中幾個核心的概念

虛擬DOM（Virtual Document Object Model）

+DOM的本質是什麼：瀏覽器中的概念，用JS對象來表示 頁面上的元素，並提供了操作 DOM 對象的API

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

Diff算法

• **tree diff:**新舊兩棵DOM樹，逐層對比的過程，就是 Tree Diff； 當整顆DOM逐層對比完畢，則所有需要被按需更新的元素，必然能夠找到；
• **component diff：**在進行Tree Diff的時候，每一層中，組件級別的對比，叫做 Component Diff；
  • 如果對比前後，組件的類型相同，則暫時認爲此組件不需要被更新；
  • 如果對比前後，組件類型不同，則需要移除舊組件，創建新組件，並追加到頁面上；
• **element diff:**在進行組件對比的時候，如果兩個組件類型相同，則需要進行 元素級別的對比，這叫做 Element Diff；
  

6.React的基本使用

1). 導入相關js庫文件(react.js, react-dom.js, babel.min.js)
	<script type="text/javascript" src="../js/react.development.js"></script>
	<script type="text/javascript" src="../js/react-dom.development.js"></script>
	<script type="text/javascript" src="../js/babel.min.js"></script>
2). 編碼:
	<div id="container"></div>
	<script type="text/babel"> //必須聲明babel
  	// 創建虛擬DOM元素
  	const vDom = <h1>Hello React</h1> // 千萬不要加引號
 	 // 渲染虛擬DOM到頁面真實DOM容器中
 	 ReactDOM.render(vDom, document.getElementById('test'))
	</script>

7.JSX的理解和使用

 1). 理解
	* 全稱: JavaScript XML
	* react定義的一種類似於XML的JS擴展語法: XML+JS
	* 作用: 用來創建react虛擬DOM(元素)對象
2). 編碼相關
	* 在解析顯示js數組時, 會自動遍歷顯示
	* 把數據的數組轉換爲標籤的數組: 
		var liArr = dataArr.map(function(item, index){
			return <li key={index}>{item}</li>
		})
3). 注意:
    * 標籤的class屬性必須改爲className屬性
    * 標籤的style屬性值必須爲: {{color:'red', width:12}}

2. jsx 語法的本質：並不是直接把 jsx 渲染到頁面上，而是 內部先轉換成了 createElement 形式，再渲染的；

3. 在 jsx 中混合寫入 js 表達式：在 jsx 語法中，要把 JS代碼寫到 { } 中

   • 渲染數字
   • 渲染字符串
   • 渲染布爾值
   • 爲屬性綁定值
   • 渲染jsx元素
   • 渲染jsx元素數組
   • 將普通字符串數組，轉爲jsx數組並渲染到頁面上【兩種方案】

4. 在 jsx 中 寫註釋：推薦使用{ /* 這是註釋 */ }

5. 在JSX創建DOM的時候，所有的節點，必須有唯一的根元素進行包裹；

6. 在 jsx 語法中，標籤必須 成對出現，如果是單標籤，則必須自閉和！

當 編譯引擎，在編譯JSX代碼的時候，如果遇到了<那麼就把它當作 HTML代碼去編譯，如果遇到了 {} 就把 花括號內部的代碼當作 普通JS代碼去編譯；

8.React中創建組件

第1種 - 創建組件的方式

使用構造函數來創建組件**，如果要接收外界傳遞的數據，需要在 構造函數的參數列表中使用props來接收；

必須要向外return一個合法的JSX創建的虛擬DOM；

• 創建組件：

function Hello () { 
	// return null 
	return <div>Hello 組件</div>
}

• 爲組件傳遞數據：

// 使用組件並 爲組件傳遞 props 數據
<Hello name={dog.name} age={dog.age} gender={dog.gender}></Hello>

// 在構造函數中，使用 props 形參，接收外界 傳遞過來的數據
function Hello(props) {
  // props.name = 'zs'
  console.log(props)
  // 結論：不論是 Vue 還是 React，組件中的 props 永遠都是隻讀的；不能被重新賦值；

  return <div>這是 Hello 組件 --- {props.name} --- {props.age} --- {props.gender}</div>
}

1. 父組件向子組件傳遞數據
2. 使用{…obj}屬性擴散傳遞數據
3. 將組件封裝到單獨的文件中
4. 注意：組件的名稱首字母必須是大寫
5. 在導入組件的時候，如何省略組件的.jsx後綴名：

// 打開 webpack.config.js ，並在導出的配置對象中，新增 如下節點：
resolve: {
    extensions: ['.js', '.jsx', '.json'], // 表示，這幾個文件的後綴名，可以省略不寫
    alias: {
        '@': path.join(__dirname, './src')
    }
  }

6. 在導入組件的時候，配置和使用@路徑符號

第2種 - 創建組件的方式

使用 class 關鍵字來創建組件
ES6 中 class 關鍵字，是實現面向對象編程的新形式；

瞭解ES6中 class 關鍵字的使用

1. class 中 constructor 的基本使用
2. 實例屬性和實例方法
3. 靜態屬性和靜態方法
4. 使用 extends 關鍵字實現繼承

基於class關鍵字創建組件

最基本的組件結構：

class 組件名稱 extends React.Component {
    render(){
        return <div>這是 class 創建的組件</div>
    }
}

9.兩種創建組件方式的對比

1. 用構造函數創建出來的組件：叫做“無狀態組件”
2. 用class關鍵字創建出來的組件：叫做“有狀態組件”

有狀態組件和無狀態組件之間的本質區別就是：有無state屬性！