React中的核心概念
* 1 虛擬DOM（Virtual DOM）
* 2 Diff算法（虛擬DOM的加速器，提升React性能的法寶）
虛擬DOM（Vitural DOM）
React將DOM抽象為虛擬DOM，虛擬DOM其實就是用一個對象來描述DOM，通過對比前后兩個對象的差異，最終只把變化的部分重新渲染，提高渲染的效率
為什么用虛擬dom，當dom反生更改時需要遍歷 而原生dom可遍歷屬性多大231個 且大部分與渲染無關 更新頁面代價太大
VituralDOM的處理方式
* 1 用 JavaScript 對象結構表示 DOM 樹的結構，然后用這個樹構建一個真正的 DOM 樹，插到文檔當中* 2 當狀態變更的時候，重新構造一棵新的對象樹。然后用新的樹和舊的樹進行比較，記錄兩棵樹差異* 3 把2所記錄的差異應用到步驟1所構建的真正的DOM樹上，視圖就更新了
Diff算法
當你使用React的時候，在某個時間點 render() 函數創建了一棵React元素樹，
在下一個state或者props更新的時候，render() 函數將創建一棵新的React元素樹，
React將對比這兩棵樹的不同之處，計算出如何高效的更新UI（只更新變化的地方）
Diff算法的說明 - 1
* 如果兩棵樹的根元素類型不同，React會銷毀舊樹，創建新樹
// 舊樹<div><Counter /></div>// 新樹<span><Counter /></span>執行過程：destory Counter -> insert Counter
Diff算法的說明 - 2
* 對於類型相同的React DOM 元素，React會對比兩者的屬性是否相同，只更新不同的屬性
* 當處理完這個DOM節點，React就會遞歸處理子節點。
// 舊<div className="before" title="stuff" />// 新<div className="after" title="stuff" />只更新：className 屬性// 舊<div style={{color: 'red', fontWeight: 'bold'}} />// 新<div style={{color: 'green', fontWeight: 'bold'}} />只更新：color屬性
Diff算法的說明 - 3
* 1 當在子節點的后面添加一個節點，這時候兩棵樹的轉化工作執行的很好
// 舊<ul><li>first</li><li>second</li></ul>// 新<ul><li>first</li><li>second</li><li>third</li></ul>執行過程：React會匹配新舊兩個<li>first</li>，匹配兩個<li>second</li>，然后添加 <li>third</li> tree
* 2 但是如果你在開始位置插入一個元素，那么問題就來了：
// 舊<ul><li>Duke</li><li>Villanova</li></ul>// 新<ul><li>Connecticut</li><li>Duke</li><li>Villanova</li></ul>在沒有key屬性時執行過程：React將改變每一個子刪除重新創建，而非保持 <li>Duke</li> 和 <li>Villanova</li> 不變
key 屬性
為了解決以上問題，React提供了一個 key 屬性。當子節點帶有key屬性，React會通過key來匹配原始樹和后來的樹。
// 舊<ul><li key="2015">Duke</li><li key="2016">Villanova</li></ul>// 新<ul><li key="2014">Connecticut</li><li key="2015">Duke</li><li key="2016">Villanova</li></ul>執行過程：現在 React 知道帶有key '2014' 的元素是新的，對於 '2015' 和 '2016' 僅僅移動位置即可
* 說明：key屬性在React內部使用，但不會傳遞給你的組件
* 推薦：在遍歷數據時，推薦在組件中使用 key 屬性：<li key={item.id}>{item.name}</li>
* 注意：key只需要保持與他的兄弟節點唯一即可，不需要全局唯一
* 注意：盡可能的減少數組index作為key，數組中插入元素的等操作時，會使得效率底下
React的基本使用
* 安裝：npm i -S react react-dom
* react：react 是React庫的入口點
* react-dom：提供了針對DOM的方法，比如：把創建的虛擬DOM，渲染到頁面上
// 1. 導入 reactimport React from 'react'import ReactDOM from 'react-dom'// 2. 創建 虛擬DOM// 參數1：元素名稱 參數2：元素屬性對象(null表示無) 參數3：當前元素的子元素string||createElement() 的返回值const divVD = React.createElement('div', {title: 'hello react'}, 'Hello React！！！')// 3. 渲染// 參數1：虛擬dom對象 參數2：dom對象表示渲染到哪個元素內 參數3：回調函數ReactDOM.render(divVD, document.getElementById('app'))
createElement()的問題
* 說明：createElement()方式，代碼編寫不友好，太復雜
var dv = React.createElement("div",{ className: "shopping-list" },React.createElement("h1",null,"Shopping List for "),React.createElement("ul",null,React.createElement("li",null,"Instagram"),React.createElement("li",null,"WhatsApp")))// 渲染ReactDOM.render(dv, document.getElementById('app'))
JSX 的基本使用
* 注意：JSX語法，最終會被編譯為 createElement() 方法
* 推薦：使用 JSX 的方式創建組件
* JSX - JavaScript XML
* 安裝：npm i -D babel-preset-react （依賴與：babel-core/babel-loader）
注意：JSX的語法需要通過 babel-preset-react 編譯后，才能被解析執行
/* 1 在 .babelrc 開啟babel對 JSX 的轉換 */{"presets": ["env", "react"]}/* 2 webpack.config.js */module: [rules: [{ test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ },]]/* 3 在 js 文件中 使用 JSX */const dv = (<div title="標題" className="cls container">Hello JSX!</div>)/* 4 渲染 JSX 到頁面中 */ReactDOM.render(dv, document.getElementById('app'))
JSX的注意點
* 注意 1: 如果在 JSX 中給元素添加類, 需要使用 className 代替 class
* 類似：label 的 for屬性，使用htmlFor代替
* 注意 2：在 JSX 中可以直接使用 JS代碼，直接在 JSX 中通過 {} 中間寫 JS代碼即可
* 注意 3：在 JSX 中只能使用表達式，但是不能出現 語句！！！
* 注意 4：在 JSX 中注釋語法：{/* 中間是注釋的內容 */}
React組件
React 組件可以讓你把UI分割為獨立、可復用的片段，並將每一片段視為相互獨立的部分。
* 組件是由一個個的HTML元素組成的
* 概念上來講, 組件就像JS中的函數。它們接受用戶輸入（props），並且返回一個React對象，用來描述展示在頁面中的內容
React創建組件的兩種方式
* 1 通過 JS函數 創建（無狀態組件）
* 2 通過 class 創建（有狀態組件）
函數式組件 和 class 組件的使用場景說明：
1 如果一個組件僅僅是為了展示數據，那么此時就可以使用 函數組件
2 如果一個組件中有一定業務邏輯，需要操作數據，那么就需要使用 class 創建組件，因為，此時需要使用 state
JavaScript函數創建
* 注意：1 函數名稱必須為大寫字母開頭，React通過這個特點來判斷是不是一個組件
* 注意：2 函數必須有返回值，返回值可以是：JSX對象或null
* 注意：3 返回的JSX，必須有一個根元素
* 注意：4 組件的返回值使用()包裹，避免換行問題
function Welcome(props) {return (// 此處注釋的寫法<div className="shopping-list">{/* 此處 注釋的寫法 必須要{}包裹 */}<h1>Shopping List for {props.name}</h1><ul><li>Instagram</li><li>WhatsApp</li></ul></div>)}ReactDOM.render(<Welcome name="jack" />,document.getElementById('app'))
class創建
在es6中class僅僅是一個語法糖，不是真正的類，本質上還是構造函數+原型 實現繼承
// ES6中class關鍵字的簡單使用// - **ES6中的所有的代碼都是運行在嚴格模式中的**// - 1 它是用來定義類的，是ES6中實現面向對象編程的新方式// - 2 使用`static`關鍵字定義靜態屬性// - 3 使用`constructor`構造函數，創建實例屬性// - [參考](http://es6.ruanyifeng.com/#docs/class)// 語法：class Person {// 實例的構造函數 constructorconstructor(age){// 實例屬性this.age = age}// 在class中定義方法 此處為實例方法 通過實例打點調用sayHello () {console.log('大家好，我今年' + this.age + '了');}// 靜態方法 通過構造函數打點調用 Person.doudou()static doudou () {console.log('我是小明，我新get了一個技能，會暖床');}}// 添加靜態屬性Person.staticName = '靜態屬性'// 實例化對象const p = new Person(19)// 實現繼承的方式class American extends Person {constructor() {// 必須調用super(), super表示父類的構造函數super()this.skin = 'white'this.eyeColor = 'white'}}// 創建react對象// 注意：基於 `ES6` 中的class，需要配合 `babel` 將代碼轉化為瀏覽器識別的ES5語法// 安裝：`npm i -D babel-preset-env`// react對象繼承字React.Componentclass ShoppingList extends React.Component {constructor(props) {super(props)}// class創建的組件中 必須有rander方法 且顯示return一個react對象或者nullrender() {return (<div className="shopping-list"><h1>Shopping List for {this.props.name}</h1><ul><li>Instagram</li><li>WhatsApp</li></ul></div>)}}