免費(fèi)AI編程助手
React 介紹
React是由Facebook（臉書(shū)）開(kāi)源的一個(gè)進(jìn)行創(chuàng)建用戶界面的一款JavaScript庫(kù)，如今已應(yīng)用于Facebook及旗下的Instagram應(yīng)用。
React與龐大的AngularJS不同的地方在于它只專注于MVC框架中的V，即視圖；這點(diǎn)使得React很容易與開(kāi)發(fā)者已有的開(kāi)發(fā)棧進(jìn)行融合。
React在使用的時(shí)候，你應(yīng)該從UI出發(fā)，抽象出不同的組件，繼而將它們拼裝起來(lái)；這點(diǎn)順應(yīng)了Web開(kāi)發(fā)組件化的趨勢(shì)。
React應(yīng)用
React 的核心思想是：封裝組件。
各個(gè)組件維護(hù)自己的狀態(tài)和UI，當(dāng)狀態(tài)變更，自動(dòng)重新渲染整個(gè)組件。
基于這種方式的一個(gè)直觀感受就是我們不再需要不厭其煩地來(lái)回查找某個(gè) DOM元素，然后操作 DOM 去更改 UI。
React 大體包含下面這些概念：
- 組件
- JSX
- Virtual DOM
- Data Flow
這里通過(guò)一個(gè)簡(jiǎn)單的組件來(lái)快速了解這些概念，以及建立起對(duì) React 的一個(gè)總體認(rèn)識(shí)。
import React, { Component } from 'react';
import { render } from 'react-dom';
class HelloMessage extends Component {
render() {
return <div>Hello {this.props.name}</div>;
}
}
// 加載組件到 DOM 元素 mountNode
render(<HelloMessage name="John" />, mountNode);
組件
React 應(yīng)用都是構(gòu)建在組件之上。
上面的 HelloMessage 就是一個(gè) React構(gòu)建的組件，最后一句 render 會(huì)把這個(gè)組件顯示到頁(yè)面上的某個(gè)元素 mountNode 里面，顯示的內(nèi)容就是 <div>Hello John</div>。
props 是組件包含的兩個(gè)核心概念之一，另一個(gè)是 state（這個(gè)組件沒(méi)用到）。可以把 props 看作是組件的配置屬性，在組件內(nèi)部是不變的，只是在調(diào)用這個(gè)組件的時(shí)候傳入不同的屬性（比如這里的 name）來(lái)定制顯示這個(gè)組件。
JSX
從上面的代碼可以看到將 HTML 直接嵌入了 JS 代碼里面，這個(gè)就是 React 提出的一種叫 JSX 的語(yǔ)法，這應(yīng)該是最開(kāi)始接觸 React 最不能接受的設(shè)定之一，因?yàn)榍岸吮弧氨憩F(xiàn)和邏輯層分離”這種思想“洗腦”太久了。但實(shí)際上組件的 HTML 是組成一個(gè)組件不可分割的一部分，能夠?qū)?HTML 封裝起來(lái)才是組件的完全體，React 發(fā)明了 JSX 讓 JS 支持嵌入 HTML 不得不說(shuō)是一種非常聰明的做法，讓前端實(shí)現(xiàn)真正意義上的組件化成為了可能。
好消息是你可以不一定使用這種語(yǔ)法，后面會(huì)進(jìn)一步介紹 JSX，到時(shí)候你可能就會(huì)喜歡上了?，F(xiàn)在要知道的是，要使用包含 JSX 的組件，是需要“編譯”輸出 JS 代碼才能使用的，之后就會(huì)講到開(kāi)發(fā)環(huán)境。
Virtual DOM
當(dāng)組件狀態(tài) state 有更改的時(shí)候，React 會(huì)自動(dòng)調(diào)用組件的 render 方法重新渲染整個(gè)組件的 UI。
當(dāng)然如果真的這樣大面積的操作 DOM，性能會(huì)是一個(gè)很大的問(wèn)題，所以 React 實(shí)現(xiàn)了一個(gè)VirtualDOM，組件 DOM 結(jié)構(gòu)就是映射到這個(gè) Virtual DOM 上，React 在這個(gè) Virtual DOM上實(shí)現(xiàn)了一個(gè) diff 算法，當(dāng)要重新渲染組件的時(shí)候，會(huì)通過(guò) diff 尋找到要變更的 DOM 節(jié)點(diǎn)，再把這個(gè)修改更新到瀏覽器實(shí)際的DOM 節(jié)點(diǎn)上，所以實(shí)際上不是真的渲染整個(gè) DOM 樹(shù)。這個(gè) Virtual DOM 是一個(gè)純粹的 JS 數(shù)據(jù)結(jié)構(gòu)，所以性能會(huì)比原生 DOM 快很多。
Data Flow
“單向數(shù)據(jù)綁定”是 React推崇的一種應(yīng)用架構(gòu)的方式。當(dāng)應(yīng)用足夠復(fù)雜時(shí)才能體會(huì)到它的好處，雖然在一般應(yīng)用場(chǎng)景下你可能不會(huì)意識(shí)到它的存在，也不會(huì)影響你開(kāi)始使用React，你只要先知道有這么個(gè)概念。
