react Dom與JSX關系

react頁面渲染吠冤，由三部分構成：state 數據 + JSX模版 => 真實Dom(顯示)

正常react渲染頁面的步驟

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

react改進方式一:

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

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

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

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

2. 頁面改變：state 數據改變
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,建議用數據驅動的方式操作Dom。
例如：利用ref的方式獲取dom忧陪，在和setState同時使用會出問題：因為SetState是異步的扣泊，直接通過ref獲取Dom節(jié)點從而取得的值可能不是最新的值近范。解決方案：setState后第二個參數里執(zhí)行：

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

react 路由

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

ant Design 使用

css 入門補充小知識

1. ID選擇符等孵，調用的時候需要 <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 背景圖片是否跟著網頁滑動
• font-style : 是否斜體稚照，oblique italic normal
• font-weight: 字體粗細，font-size：字體大小
• line-height: 行與行間距俯萌。
• font-variant: 全部大小寫果录，但是首字母的大寫會更大些
• text-indent: 文本首行縮進，px或者%
• text-align: 文本對齊
• text-decoration: 上滑線咐熙，下劃線弱恒，刪除線
• text-transform: 首字母大寫，變大寫棋恼，變小寫
• :link: 設置未訪問鏈接屬性返弹，:visited 設置訪問過鏈接屬性，:active 鼠標點擊與釋放爪飘，:hover 鼠標懸停時
• float: left,right // 向哪個方向浮動
• display:
  display: flex; //將對象作為彈性伸縮盒顯示
  display: block;//block是一塊狀元素的方式顯示
• position:
  static（靜態(tài)定位）： 默認值义起。沒有定位，元素出現在正常的流中（忽略 top, bottom, left, right 或者 z-index 聲明）
  relative（相對定位）：生成相對定位的元素师崎，通過top,bottom,left,right的設置相對于其正常（原先本身）位置進行定位默终。可通過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 > 類別 > 元素
• 兩個層級樣式表，遵循離內容比較近的樣式
• !important 畔塔，申明指示的位置優(yōu)先潭辈，幫助診斷是否沖突
• 選擇符，
• 元素

本文樣例Demo