2.1 為什么使用 React

React是一個(gè)用于構(gòu)建用戶界面的JavaScript庫(kù)，具有組件化、聲明式等優(yōu)點(diǎn)，另外由于其優(yōu)秀的DOM性能優(yōu)化，使其一面世就廣受用戶追捧。

本章從專(zhuān)注于視圖層、組件化開(kāi)發(fā)和聲明式編程、Virtual DOM幾個(gè)特征來(lái)說(shuō)明為什么使用React。

注：?jiǎn)渭兊腞eact.js只是一個(gè)JS庫(kù)，而其整個(gè)技術(shù)棧就是一個(gè)漸進(jìn)式的框架。漸進(jìn)式框架：主張最少，也就是可以只用它其中的一部分，比如，開(kāi)始搭建項(xiàng)目時(shí)，開(kāi)發(fā)者只需要用到React，就可以只引入React，當(dāng)項(xiàng)目有了新的需求之后，可以再引入其他的類(lèi)庫(kù)，如路由庫(kù)、狀態(tài)管理庫(kù)等。

2.1.1 專(zhuān)注于視圖層

在編寫(xiě)前端項(xiàng)目的時(shí)候，經(jīng)常會(huì)涉及對(duì)DOM的操作。開(kāi)始時(shí)用戶都是使用原生JS直接去操作DOM節(jié)點(diǎn)，但是原生API實(shí)在不好用并且還有很多兼容方面的問(wèn)題，所以jQuery就橫空出世了。

很長(zhǎng)一段時(shí)間內(nèi)，JQuery以其簡(jiǎn)潔的API俘獲著前端開(kāi)發(fā)者的心。但JQuery只是簡(jiǎn)化了DOM操作，在性能優(yōu)化上并沒(méi)有做什么處理。隨著前端的業(yè)務(wù)越來(lái)越復(fù)雜，想要寫(xiě)出如微博這些交互比較復(fù)雜的頁(yè)面，JQuery就遠(yuǎn)遠(yuǎn)不夠了，React正是在這種背景下誕生的。

React專(zhuān)注于View層的解決方案，F(xiàn)acebook官方也說(shuō)React就是一個(gè)View層，也就是視圖層。什么意思呢？就是在使用React的時(shí)候，只要告訴React需要的視圖長(zhǎng)什么樣，或者告訴React在什么時(shí)間點(diǎn)，把視圖更新成什么樣就可以了，剩下的視圖的渲染、性能的優(yōu)化等一系列問(wèn)題交給React搞定即可。

2.1.2 組件化開(kāi)發(fā)和聲明式編程

在React中，通常會(huì)把視圖抽象成一個(gè)個(gè)組件，如Button按鈕組件、Menu菜單組件、List列表組件等，然后通過(guò)組件的自由結(jié)合來(lái)拼成完整的視圖。這種操作可以極大提升開(kāi)發(fā)效率，后期維護(hù)和相關(guān)的測(cè)試也都十分便捷。

在傳統(tǒng)的項(xiàng)目開(kāi)發(fā)中，通常采取命令式的編程方式。下面通過(guò)留言板這個(gè)案例來(lái)看看之前的編寫(xiě)方式，這個(gè)案例中先暫時(shí)不考慮輸入框，只看留言添加部分，具體代碼如下：

Html：

JavaScript：

在實(shí)現(xiàn)的過(guò)程中，可以看到操作過(guò)程是一步一步地給程序下命令：

1）獲取新留言。

2）創(chuàng)建一個(gè)新的li標(biāo)簽。

3）把留言內(nèi)容放入li。

4）把生成的li放入list。

這種一步一步下命令的方式就稱(chēng)為命令式編程，這個(gè)過(guò)程還是比較煩瑣的，尤其程序邏輯比較復(fù)雜時(shí)需要編寫(xiě)大量的代碼。

而React遵從的是聲明式編程，聲明式和命令式有什么區(qū)別？簡(jiǎn)單的總結(jié)：命令式編程注重過(guò)程，開(kāi)發(fā)者需要告訴程序每步要怎么做；聲明式編程注重結(jié)果，直接告訴程序要什么。同樣以留言板為例，來(lái)看看利用React怎么來(lái)實(shí)現(xiàn)，具體代碼如下：

Message就是一個(gè)最基礎(chǔ)的React組件。該組件中，先在useState中定義了數(shù)據(jù)模型（[{id:1，……}，……]），然后在return后定義了要輸出的視圖（＜div＞……＜/div＞），同時(shí)在視圖中定義好了數(shù)據(jù)模型和視圖的關(guān)系。單擊按鈕時(shí)只是修改了數(shù)據(jù)，React會(huì)幫助開(kāi)發(fā)者進(jìn)行視圖的修改。

在這個(gè)過(guò)程中并沒(méi)有一步一步命令React要怎么做，只是告訴React數(shù)據(jù)模型長(zhǎng)什么樣式，視圖長(zhǎng)什么樣式，數(shù)據(jù)和視圖之前的關(guān)系是怎樣的，最終就完成了整個(gè)程序。這種編程方式就是聲明式編程。

從這里看到，聲明式編程邏輯更加清晰，代碼更加容易閱讀，當(dāng)然后期維護(hù)也會(huì)更加容易。

2.1.3 Virtual DOM

在留言板的案例中，可以看到React采取聲明式編程使邏輯更加清晰易懂，除此之外也可以看到一部分React的工作方式：建立state，根據(jù)state生成視圖，修改state，生成新的state，根據(jù)新state生成視圖。

如圖2-1所示，在這個(gè)過(guò)程中，只要對(duì)state進(jìn)行修改，React就會(huì)重新渲染視圖。那大量的DOM操作會(huì)對(duì)頁(yè)面性能造成影響嗎？這就涉及React中的一項(xiàng)核心技術(shù)——虛擬DOM（Virtual DOM）。

在React中，每一個(gè)組件都會(huì)生成一個(gè)虛擬DOM樹(shù)。這個(gè)DOM樹(shù)會(huì)以純對(duì)象的方式來(lái)對(duì)視圖（真實(shí)DOM）進(jìn)行描述，如圖2-2所示，可以看到虛擬DOM樹(shù)是如何來(lái)描述DOM結(jié)構(gòu)的。

React會(huì)根據(jù)組件生成的虛擬DOM來(lái)生成真實(shí)的DOM。組件中的數(shù)據(jù)變化后，組件又會(huì)生成一個(gè)新的虛擬DOM，React會(huì)對(duì)新舊虛擬DOM進(jìn)行對(duì)比，找出發(fā)生變化的節(jié)點(diǎn)，然后只針對(duì)發(fā)生變化的節(jié)點(diǎn)進(jìn)行重新渲染，這樣就極大提升了重新渲染的性能。

本節(jié)講述了React的一些基本特性：專(zhuān)注于視圖層、組件化開(kāi)發(fā)、聲明式編程以及基于虛擬DOM的視圖更新。這些特性可以給開(kāi)發(fā)帶來(lái)極大的便利，另外也使代碼性能有了大幅度的提升，這也是React會(huì)受到用戶追捧的核心原因。