React優勢
- 組件化開發 社區活躍 提交代碼可複用性 維護性
- 虛擬DOM（diff 算法） 提高頁面渲染速度
- 生命週期 對數據的控制 使開發者更專注業務開發
- 單向數據流
總結:
React是一個前端框架 使前端開發更細緻化
1.路由層Route
程序跑起來 首先尋找路由組件 根據路由組件找到對應的頁面組件 頁面組件找到對應的UI組件 最後進行渲染
2.數據層state
3.虛擬dom 減少dom的操作
讓代碼更具有維護性 而且國內antd 讓開發後臺管理系統變得更加容易
組件化開發
路由組件 頁面組件 UI組件 提交代碼維護性 以及可讀性
生命週期
單向數據流
數據的流向是單向的——從父節點傳遞到子節點，因爲組件是簡單而且易於把握的，他們只需從父節點獲取props渲染即可，如果頂層組件的某個prop改變了，React會遞歸的向下遍歷整棵組件樹，重新渲染所有使用這個屬性的組件。
React中Virtual-DOM原理 diff算法
第一次渲染頁面 同時保存一份當前Dom-Tree的虛擬DOM 然後第二次渲染時 對比虛擬DOM 只渲染改變的DOM結構
更多對Virtual-DOM介紹訪問https://www.zhihu.com/question/29504639/answer/73607810
真實DOM屬性
真實DOM是很慢的。如果我們把一個簡單的div元素的屬性都打印出來，你會看到:
而這僅僅是第一層。真正的 DOM 元素非常龐大，這是因爲標準就是這麼設計的。而且操作它們的時候你要小心翼翼，輕微的觸碰可能就會導致頁面重排，這可是殺死性能的罪魁禍首。
虛擬DOM類似以下結構:
相對於 DOM 對象，原生的 JavaScript 對象處理起來更快，而且更簡單。DOM 樹上的結構、屬性信息我們都可以很容易地用 JavaScript 對象表示出來：
var element = {
tagName: 'ul', // 節點標籤名
props: { // DOM的屬性，用一個對象存儲鍵值對
id: 'list'
},
children: [ // 該節點的子節點
{tagName: 'li', props: {class: 'item'}, children: ["Item 1"]},
{tagName: 'li', props: {class: 'item'}, children: ["Item 2"]},
{tagName: 'li', props: {class: 'item'}, children: ["Item 3"]},
]
}然後虛擬DOM進行對比 在沒有進行render()之前 合併對比所有DOM的最小操作 最後渲染真實的DOM 最小的操作真實的DOM 因爲相對來說直接操作真實的DOM成本很高
還有一個問題
react 在每個組件內部有一個私有的state狀態機的東西 專門負責管理數據 這樣數據和UI就解耦了 不像以前更新了DOM可能就混亂 難以管理
最終解決的就是維護狀態，更新視圖
比較易懂的例子
比如說，現在你的list是這樣，
<ul>
<li>0</li>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>你想把它變成這樣
<ul>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>傳統的方式: 移除4個li元素 重新添加5個li元素 一共操作了9次dom
然而react
1.首先對應的虛擬Dom中對應的每個li元素生成了一個唯一的id
2.在diff對比虛擬dom 發現前4個li元素的DOM結構並沒有變化 變化的只是裏面的內容
然後新增一個"<li>10</li>"元素 一共五次操作
對比
傳統的方式中
一共操作了9次DOM 這9次DOM包括了對DOM結構的操作(ps:移除 新增)
以及DOM裏面的內容的操作
而React中
只有一次是對DOM結構和DOM裏內容的操作 然而其他4次都是對Dom裏的內容進行的操作
這樣一對比
React操作DOM的次數最少 並且React每次都是最小單元的最最最細緻的在操作和管理DOM的結構
真的強大