React 背景介紹

React 起源於 Facebook 的內部項目，因為該公司對市場上所有 JavaScript MVC 框架，都不滿意，就決定自己寫一套，用來架設 Instagram 的網站。做出來以後，發現這套東西很好用，就在2013年5月開源了。

特點

• 1 使用 JSX語法 創建組件，實現組件化開發，為函數式的 UI 編程方式打開了大門
• 2 性能高的讓人稱贊：通過 diff算法 和 虛擬DOM 實現視圖的高效更新
• 3 HTML僅僅是個開始

為什麽要用React

• 1 使用組件化開發方式，符合現代Web開發的趨勢
• 2 技術成熟，社區完善，配件齊全，適用於大型Web項目（生態系統健全）
• 3 由Facebook專門的團隊維護，技術支持可靠
• 4 ReactNative - Learn once, write anywhere: Build mobile apps with React
• 5 使用方式簡單，性能非常高，支持服務端渲染
• 6 React非常火，從技術角度，可以滿足好奇心，提高技術水平；從職業角度，有利於求職和晉升，有利於參與潛力大的項目

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樹上，視圖就更新了

React的基本使用

• 安裝：npm i -S react react-dom
• react：react 是React庫的入口點
• react-dom：提供了針對DOM的方法，比如：把創建的虛擬DOM，渲染到頁面上

// 1\. 導入 react
import 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‘))

原文出處

React入門----基礎篇