第一節(jié):React認(rèn)識和JSX語法的了解

1.React 是什么

是用于構(gòu)建用戶界面的JavaScript庫

如何理解:

React核心本身就是一個JS的第三方庫弄息，從宏觀角度看其實(shí)和其他JS庫沒什么區(qū)別
用于構(gòu)建用戶界面椰于，意思就是這個庫的目的主要負(fù)責(zé)處理用戶界面-幫助渲染HTML視圖的梭姓。

2.React的特點(diǎn)

聲明式: 聲明式相對于以前命令式簡單高效
組件化: 創(chuàng)建各種狀態(tài)各異的組件，由組件來組成復(fù)雜的UI
JSX : 使用獨(dú)特JSX語法（后面會說）來創(chuàng)建組件屠升，使用函數(shù)式編程思想來進(jìn)行UI更新
虛擬DOM: 基于內(nèi)部虛擬DOM和Diff算法來有選擇性的進(jìn)行視圖更新
單向數(shù)據(jù)流: 子組件本身不會改變接受到的數(shù)據(jù)潮改，只會監(jiān)聽數(shù)據(jù)變化，根據(jù)新值重新渲染

2.1 單項(xiàng)數(shù)據(jù)流

單項(xiàng)數(shù)據(jù)流的理解:

單向數(shù)據(jù)流是指數(shù)據(jù)的流向只能由父組件通過props將數(shù)據(jù)傳遞給子組件腹暖，
不能由子組件向父組件傳遞數(shù)據(jù)汇在，
要想實(shí)現(xiàn)數(shù)據(jù)的雙向綁定，只能由子組件接收父組件props傳過來的方法去改變父組件的數(shù)據(jù)而不是直接將子組件的數(shù)據(jù)傳遞給父組件脏答。

3. 虛擬DOM的理解

3.1 什么是虛擬DOM

虛擬DOM本身就是JS對象, 使用JS對象模擬DOM樹的結(jié)構(gòu)

虛擬DOM在最后會轉(zhuǎn)換位真實(shí)的DOM渲染到頁面上

因此在React開發(fā)中還需要操作虛擬DOM, 已經(jīng)相關(guān)的數(shù)據(jù), React會自動的將虛擬DOM轉(zhuǎn)為真實(shí)的DOM

虛擬DOM示例:

var vDOM = React.creatElement("h2",{id:"title"}, "hello")

虛擬DOM的理解

虛擬DOM是模擬真實(shí)的DOM, 真實(shí)的DOM會有標(biāo)簽,屬性,標(biāo)簽嵌套的值
示例中第一個參數(shù)h2字符串轉(zhuǎn)為真實(shí)的DOM就是h2標(biāo)簽
示例中第二個參數(shù)對象轉(zhuǎn)為真實(shí)的DOM, 屬性為標(biāo)簽的屬性, 值為標(biāo)簽屬性值
示例中第三個參數(shù)是標(biāo)簽嵌套的內(nèi)容,

3.2 React中如何創(chuàng)建虛擬DOM

在React中創(chuàng)建虛擬DOM的方式有兩種,

純JS的方式創(chuàng)建虛擬DOM
JSX語法創(chuàng)建虛擬DOM

3.2.1 純JS的方式創(chuàng)建虛擬DOM

使用純JS方式創(chuàng)建虛擬DOM說明:

React提供了一個createElement用來當(dāng)創(chuàng)建虛擬DOM
用點(diǎn)類似于document.createElement,創(chuàng)建真實(shí)在虛擬DOM
虛擬DOM相較于真實(shí)的DOM會非常輕, 輕就是屬性會比較少,只有一些核心的屬性

示例如下:

// 虛擬DOM
let vDOM = React.createElement("h2",{id:"title"},"Hello World")

// 真實(shí)的DOM
let h3 = document.createElement("h3")

// 打印虛擬DOM和真實(shí)的DOM對比就理解輕重的概念
console.log(vDOM);
console.dir(h3);


// 將虛擬DOM渲染到頁面上
ReactDOM.render((vDOM), document.getElementById("app"))

3.2.2 JSX語法創(chuàng)建虛擬DOM

說明

所謂JSX語法就是在JS中可以像HTML中一樣創(chuàng)建標(biāo)簽
JSX語法創(chuàng)建虛擬DOM相對于純JS語法比較簡單
JSX語法最終還是會被React轉(zhuǎn)為JS方式的虛擬DOM
開發(fā)過程中一般會選擇JSX語法創(chuàng)建虛擬DOM

示例代碼:


// JSX語法創(chuàng)建虛擬DOM
let vDOM = <h2 id="title">Hello World</h2>

// 將虛擬DOM渲染到頁面上
ReactDOM.render((vDOM), document.getElementById("app"))

3.3 虛擬DOM的優(yōu)點(diǎn)

3.3.1 虛擬DOM的優(yōu)勢

虛擬DOM的本質(zhì)就是內(nèi)存中的JavaScript對象

虛擬(virtual)DOM, 不總是直接操作DOM(最小化重繪DOM次數(shù))
DOM Diff 算法最小化頁面重繪(最小化重繪區(qū)域)

3.3.2 傳統(tǒng)操作DOM的理解

瀏覽器的渲染機(jī)制首先會解析HTML構(gòu)建DOM樹
瀏覽器解析CSS構(gòu)建CSS規(guī)則樹
將DOM樹和CSS規(guī)則樹合并形成Render渲染樹
對Reader渲染樹的各個節(jié)點(diǎn)進(jìn)行布局計算
根據(jù)計算的結(jié)果將內(nèi)容繪制在屏幕上

3.3.3 操作虛擬DOM理解

傳統(tǒng)的直接操作DOM,每一次的改變都會出發(fā)重構(gòu)或重繪糕殉，每次的重構(gòu)重繪都是從根節(jié)點(diǎn)開始分析處理
操作虛擬DOM，只會更新虛擬DOM殖告，每一次的變化都會和上一次虛擬DOM進(jìn)行對比阿蝶，找到變化的部分，
最終React會將包含所有變化的虛擬DOM和真實(shí)DOM進(jìn)行對比, 找到變化的部分一次渲染, 提升渲染速度和性能

虛擬DOM_圖1.png

4. JSX語法

4.1 JSX語法的理解

語法全稱 JavaScript XML
React 定義的一種類似于XML 的JS 擴(kuò)展語法 XML + JS
作用: 就是用來創(chuàng)建react虛擬DOM(元素)對象

4.2 JSX示例

var vDOM = <div>wuwei</div>

示例理解:

處理中是有通過JSX語法創(chuàng)建的虛擬DOM
值不是字符串 ,也不是一個HTML 或者XML,就是一個虛擬DOM,
它最終會被轉(zhuǎn)行為一個JS對象(虛擬DOM)
標(biāo)簽名可以是任意合法的HTML標(biāo)簽名或自定義標(biāo)簽名,
屬性也可以是合法的標(biāo)簽屬性,也可以是自定義屬性

4.3 JSX語法解析規(guī)則

JSX語法解析有一個基本的規(guī)則:

碰到<開頭的代碼,以標(biāo)簽的語法解析:

合法的標(biāo)簽名會被當(dāng)做正常標(biāo)簽解析,如果碰到不合法的標(biāo)簽名,會當(dāng)成自定義標(biāo)簽, 通常是組件
碰到{開頭的代碼, {} 里面會以js語法解析, 被當(dāng)成js表達(dá)式

示例代碼:

// JS中普通的變量
let content = "你好 React"

// 虛擬DOM
let vDOM = <h2 id="title">{ content }</h2>

// 將虛擬DOM渲染到頁面上
ReactDOM.render((vDOM), document.getElementById("app"))

示例說明:

示例中JSX語法中嵌套的{}外會被當(dāng)做HTML解析
{}里面會被作為JS表達(dá)式解析, 因此content會被解析為變量
故而{content}的值為"你好 React"

4.4 渲染虛擬DOM語法

將虛擬DOM渲染到頁面上的語法

語法方式: ReactDOM.render(virtualDOM, containerDOM)

作用: 就是將虛擬DOM的元素渲染到真實(shí)的DOM容器中

參數(shù)說明

參數(shù)一: 純JS 或者 JSX 創(chuàng)建的虛擬DOM對象
參數(shù)二: 用來包含虛擬DOM的真實(shí)DOM元素對象(一般用div)

5. 模塊與組件和模塊化與組件化的理解

5.1 模塊

理解: 模塊就是向外提供特定功能的JS程序,一般就是一個JS文件
為什么: 因?yàn)樗械膉s代碼寫在一起,就會太多太復(fù)雜了
作用: 復(fù)用js,簡化js的編寫,提高js運(yùn)行效率

5.2 組件

理解: 用來實(shí)現(xiàn)特定(局部)功能效果的代碼集合(html/css/js)
為什么: 一個界面的功能太復(fù)雜了,
作用: 復(fù)用編碼,簡化項(xiàng)目編碼,提高運(yùn)行效率

5.3 模塊化

當(dāng)應(yīng)用的js都是以模塊來編寫的時候,這個應(yīng)用就是一個模塊化的應(yīng)用

5.4 組件化

當(dāng)應(yīng)用都是以組件的方式來實(shí)現(xiàn)的時候,這個應(yīng)用就是一個組件化的應(yīng)用