玩轉(zhuǎn) React（二）- 新型前端開(kāi)發(fā)方式

RdouTyping 發(fā)布于2019-08-21 16:44 / 1433人閱讀

摘要：這也就是所謂的單向數(shù)據(jù)流，在這種開(kāi)發(fā)方式下，會(huì)讓你更新視圖的邏輯非常清晰簡(jiǎn)單，哪怕你的前端交互很復(fù)雜，也不至于讓你的代碼那么容易變成一坨。就是在前端開(kāi)發(fā)過(guò)程中，要善于觀察和抽象。

這是《玩轉(zhuǎn) React》系列的第二篇。在該篇中，我們來(lái)了解下，React 的出現(xiàn)到底給我們的開(kāi)發(fā)方式帶來(lái)了什么樣的變化。

我的感觸可以用一個(gè)字來(lái)形容，爽！主要爽在以下兩個(gè)方面。

視圖是數(shù)據(jù)的映射（單向數(shù)據(jù)流）

React 是一個(gè)視圖層的框架，所謂視圖層就是我們?cè)诰W(wǎng)頁(yè)上能看到的部分。在傳統(tǒng)的方式中，我們通過(guò)編寫(xiě)HTML代碼來(lái)設(shè)計(jì)網(wǎng)頁(yè)的結(jié)構(gòu)，通過(guò) JavaScript 以及 getElementById 等 api 來(lái)獲取某個(gè)節(jié)點(diǎn)，通過(guò)節(jié)點(diǎn)的 innerHTML，innerText，appendChild 等屬性或者方法（或者你也可能用JQuery）來(lái)更新視圖。

在 React 時(shí)代，你除了需要自己考慮網(wǎng)頁(yè)的結(jié)構(gòu)和CSS樣式外，視圖的更新 React 統(tǒng)統(tǒng)幫你搞定。

那么，用了 React 我們?nèi)绾蝸?lái)更新視圖呢，先看下面這個(gè)張圖：

在 React 中視圖是數(shù)據(jù)的映射，你想要視圖發(fā)生變化，那你只要改變數(shù)據(jù)就好了，就是這么簡(jiǎn)單。

舉個(gè)簡(jiǎn)單的例子，你打算在你的頁(yè)面上展示用戶的名片，名片上有照片、姓名、年齡、地址等基本信息，如下圖所示：

這個(gè)名片，作為視圖的一部分，在 React 中是由某個(gè)用戶的數(shù)據(jù)映射而來(lái)的，可能長(zhǎng)得像這樣：

{
    photo: "my-photo.jpeg",
    name: "sarike",
    age: 18,
    address: "北京"
}

如果你希望網(wǎng)頁(yè)的瀏覽者，可以切換查看不同用戶的名片，你要做的只是用下一個(gè)用戶的數(shù)據(jù)替換一下當(dāng)前的數(shù)據(jù)就可以了。至于新的數(shù)據(jù)是如何替換掉頁(yè)面上的舊數(shù)據(jù)的，就無(wú)需關(guān)心了，React 會(huì)以最高效的方式幫你完成。

這也就是所謂的單向數(shù)據(jù)流，在這種開(kāi)發(fā)方式下，會(huì)讓你更新視圖的邏輯非常清晰、簡(jiǎn)單，哪怕你的前端交互很復(fù)雜，也不至于讓你的代碼那么容易變成一坨。

是不是很爽？

面向組件編程

上一部分說(shuō)的 React 中更新視圖只需要更新數(shù)據(jù)就可以了，如果你覺(jué)得也就一般般吧，那下面要說(shuō)的一定爽到爆。

先說(shuō)一下什么是組件，顧名思義，組件就是用來(lái)組合成更高級(jí)東西的物件。打個(gè)比方，比如一輛汽車，汽車中的各種螺絲、鐵塊等零件就可以看作是一個(gè)個(gè)組件，這些小的組件我們還可以繼續(xù)組合，比如組合成發(fā)動(dòng)機(jī)、輪胎、車架等有特定功能的組件，然后這些組件又可以繼續(xù)組合成一輛完整的汽車。

對(duì)應(yīng)到我們的前端開(kāi)發(fā)中，HTML中的各種元素（如：div，table，input，select等）就是一個(gè)個(gè)最基本的組件，你可以把他們繼續(xù)組合，組合成第一部分說(shuō)的名片，或者一個(gè)填寫(xiě)用戶信息的表單，展示所用用戶的一個(gè)列表等有特定業(yè)務(wù)功能的組件，各種各樣的業(yè)務(wù)組件最終組合成一個(gè)完整的前端頁(yè)面。

組件最大的特點(diǎn)就是可以重復(fù)利用，比如說(shuō)用戶名片這個(gè)組件，你可以放到個(gè)人信息頁(yè)面，也可以放到文章詳情頁(yè)面來(lái)展示作者信息，制作完成，到處利用。

言歸正傳，那在使用 React 是，是如何面向組件編程的呢，現(xiàn)在你可以這樣來(lái)理解，React 提供了一種可以創(chuàng)造新的 HTML 標(biāo)簽的能力。

例如第一部分講的用戶名片的例子，通過(guò) React 你可以制作這樣一個(gè)組件：

而且更重要的是，你可以以如此簡(jiǎn)單的方式在你應(yīng)用的任何位置重復(fù)利用。

你說(shuō)，酷不酷，爽不爽？！！

至此以后，你在開(kāi)發(fā)一個(gè)前端頁(yè)面時(shí)，你需要做的就是將頁(yè)面拆分成各種組件，然后把它們組合起來(lái)就好了。

在此想跟大家分享一點(diǎn)小經(jīng)驗(yàn)，這也關(guān)系到你最終能不能將 React 用得很溜。就是：在前端開(kāi)發(fā)過(guò)程中，要善于觀察和抽象。尤其是在項(xiàng)目前期，不要著急寫(xiě)代碼，一定觀察項(xiàng)目的原型圖或者設(shè)計(jì)稿，想想哪些部分是可以拆分成可以復(fù)用的公共組件的。這樣做能讓你后面的工作，事半功倍。

在后面的文章中你將更深入地體會(huì)到這一點(diǎn)，同時(shí)你也會(huì)體會(huì)到 React 的組件化開(kāi)發(fā)，到底是多么多么的爽！！

寫(xiě)在最后

在閱讀上面內(nèi)容的時(shí)候，你可能會(huì)有一些疑惑，比如說(shuō)你可能會(huì)質(zhì)疑“創(chuàng)建一個(gè)新的 HTML 標(biāo)簽這種說(shuō)法”，這怎么可能呢？是的，深究原理的話，確實(shí)不是這樣，但是從開(kāi)發(fā)者使用框架的角度，React 確實(shí)給了我們這樣的體驗(yàn)。所以，希望大家在閱讀的時(shí)候跟著我的節(jié)奏來(lái)就好，所有的疑惑會(huì)隨著文章的推進(jìn)，漸漸消退。

謝謝大家。