react Dom與JSX關(guān)系

react頁面渲染，由三部分構(gòu)成：state 數(shù)據(jù) + JSX模版 => 真實Dom(顯示)

正常react渲染頁面的步驟

1. 頁面首次加載：state 數(shù)據(jù) + JSX模版 => 真實dom顯示
2. 頁面改變：state 數(shù)據(jù)改變
3. state + JSX模版重新生成 Dom 替換原始Dom 顯示

react改進方式一:

1. 頁面首次加載：state 數(shù)據(jù) + JSX模版 => 真實dom顯示
2. 頁面改變：state 數(shù)據(jù)改變
3. state + JSX模版重新生成新的Dom 但是不直接替換原始Dom 顯示
4. 將新的Dom和老的Dom做比對，找出差異
5. 將新的Dom中修改的部分 替換到老的Dom中

react改進方式二(也是目前react實現(xiàn)的方式)：

1. 頁面首次加載：state 數(shù)據(jù) + JSX模版 => 生成虛擬Dom(JS對象) => 生成真實dom顯示

//虛擬Dom
['div',{id:'id1'},['span',{},'hello']]
//真實Dom
<div>
  <span>hello2</span>
</div>

2. 頁面改變：state 數(shù)據(jù)改變
3. 生成新的虛擬Dom，(即一個JS對象，用它來翻譯成真實Dom)

//虛擬Dom
['div',{id:'id1'},['span',{},'hello2']]

4. 比對兩個虛擬Dom(兩個JS對象比對)，更改虛擬 Dom值

['div',{id:'id1'},['span',{},'hello2']]

5. 由更改后的虛擬Dom重新生成 真實Dom顯示

<div>
  <span>hello2</span>
</div>

改進方式二的優(yōu)勢：

1. 操作都是JS對象，減少來對Dom的創(chuàng)建和比對。JS對象在js中比較替換是直接操控JS自身對象(Diff 算法)，性能消耗比較小，若是 生成新的Dom對象及對Dom對象的比對，需要操作系統(tǒng)的application的方法，性能消耗大。
2. 若兩次setState時間較短，react會對比兩次JS對象，最后只重新生成一次Dom

Diff 算法 -- 層層比對，父級相同則比對child，若child不同，直接替換，后續(xù)child不進行比對了。算法簡單，因此比對速度快。因此在循環(huán)中key，盡量別使用index，這樣就會使每次的循環(huán)都不能復用之前的index對象。引入Key值的原因就是為了提高虛擬Dom比對性能

ref 使用

// 1. 直接賦值
<input ref={(inputValue)=>{this.inputValue = inputValue}}> </input>
//使用:
console.log(this.inputValue.value);
 // 2. 
<input ref="inputValue"> </input>
//使用:
console.log(this.refs.inputValue.value);

ref的使用可以由以上兩種方法, 但是react并不推薦大量使用ref,建議用數(shù)據(jù)驅(qū)動的方式操作Dom。
例如：利用ref的方式獲取dom，在和setState同時使用會出問題：因為SetState是異步的，直接通過ref獲取Dom節(jié)點從而取得的值可能不是最新的值。解決方案：setState后第二個參數(shù)里執(zhí)行：

this.setState({
                dataList: tempList,
            }, ()=> {
                console.log(this.refs.inputValue.value);
            })

react 路由

• 路由分為三種：靜態(tài)路由：urlPath不同跳轉(zhuǎn)不同頁面；動態(tài)路由：頁面之間跳轉(zhuǎn)定義參數(shù)類型; get路由：頁面之間跳轉(zhuǎn)，和get請求一樣方便傳多個參數(shù)，一般用 cnpm install url --save 使用URL庫進行參數(shù)解析， 本文樣例Demo中有使用例子

ant Design 使用

css 入門補充小知識

1. ID選擇符，調(diào)用的時候需要 <p id='bold'> </p>

// csss:
p#bold {
    color: red;
}
//js:
<p id='bold'>
          這個段落應該是粗體
</p>

2. 群選擇符

/*群選擇符, 表示同時對逗號分割對標簽操作*/
p,h1,h2 {
    text-align: center;
}

• inherit: 繼承父級的上層屬性
• background-attachment: fixed 背景圖片是否跟著網(wǎng)頁滑動
• font-style : 是否斜體，oblique italic normal
• font-weight: 字體粗細，font-size：字體大小
• line-height: 行與行間距。
• font-variant: 全部大小寫，但是首字母的大寫會更大些
• text-indent: 文本首行縮進，px或者%
• text-align: 文本對齊
• text-decoration: 上滑線，下劃線，刪除線
• text-transform: 首字母大寫，變大寫，變小寫
• :link: 設(shè)置未訪問鏈接屬性，:visited 設(shè)置訪問過鏈接屬性，:active 鼠標點擊與釋放，:hover 鼠標懸停時
• float: left,right // 向哪個方向浮動
• display:
  display: flex; //將對象作為彈性伸縮盒顯示
  display: block;//block是一塊狀元素的方式顯示
• position:
  static（靜態(tài)定位）： 默認值。沒有定位，元素出現(xiàn)在正常的流中（忽略 top, bottom, left, right 或者 z-index 聲明）
  relative（相對定位）：生成相對定位的元素，通過top,bottom,left,right的設(shè)置相對于其正常（原先本身）位置進行定位。可通過z-index進行層次分級。
  absolute（絕對定位）：生成絕對定位的元素，相對于 static 定位以外的第一個父元素進行定位。元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規(guī)定。可通過z-index進行層次分級。
  fixed（固定定位）：生成絕對定位的元素，相對于瀏覽器窗口進行定位。元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規(guī)定?？赏ㄟ^z-index進行層次分級。
• display: flex ， Flex 布局以后，子元素的float、clear和vertical-align屬性將失效 。更多flex布局參考 阮一峰flex布局教程

css 沖突

• 更具體的，聽從最具體的樣式， id > 類別 > 元素
• 兩個層級樣式表，遵循離內(nèi)容比較近的樣式
• !important ，申明指示的位置優(yōu)先，幫助診斷是否沖突
• 選擇符，
• 元素

本文樣例Demo