資訊專欄INFORMATION COLUMN
摘要：這也就是所謂的單向數(shù)據(jù)流，在這種開發(fā)方式下，會讓你更新視圖的邏輯非常清晰簡單，哪怕你的前端交互很復(fù)雜，也不至于讓你的代碼那么容易變成一坨。就是在前端開發(fā)過程中，要善于觀察和抽象。
這是《玩轉(zhuǎn) React》系列的第二篇。在該篇中，我們來了解下，React 的出現(xiàn)到底給我們的開發(fā)方式帶來了什么樣的變化。
我的感觸可以用一個字來形容，爽！主要爽在以下兩個方面。
視圖是數(shù)據(jù)的映射（單向數(shù)據(jù)流）React 是一個視圖層的框架，所謂視圖層就是我們在網(wǎng)頁上能看到的部分。在傳統(tǒng)的方式中，我們通過編寫HTML代碼來設(shè)計網(wǎng)頁的結(jié)構(gòu)，通過 JavaScript 以及 getElementById 等 api 來獲取某個節(jié)點，通過節(jié)點的 innerHTML，innerText，appendChild 等屬性或者方法（或者你也可能用JQuery）來更新視圖。
在 React 時代，你除了需要自己考慮網(wǎng)頁的結(jié)構(gòu)和CSS樣式外，視圖的更新 React 統(tǒng)統(tǒng)幫你搞定。
那么，用了 React 我們?nèi)绾蝸砀乱晥D呢，先看下面這個張圖：
在 React 中視圖是數(shù)據(jù)的映射，你想要視圖發(fā)生變化，那你只要改變數(shù)據(jù)就好了，就是這么簡單。
舉個簡單的例子，你打算在你的頁面上展示用戶的名片，名片上有照片、姓名、年齡、地址等基本信息，如下圖所示：
這個名片，作為視圖的一部分，在 React 中是由某個用戶的數(shù)據(jù)映射而來的，可能長得像這樣：
{
photo: "my-photo.jpeg",
name: "sarike",
age: 18,
address: "北京"
}
如果你希望網(wǎng)頁的瀏覽者，可以切換查看不同用戶的名片，你要做的只是用下一個用戶的數(shù)據(jù)替換一下當(dāng)前的數(shù)據(jù)就可以了。至于新的數(shù)據(jù)是如何替換掉頁面上的舊數(shù)據(jù)的，就無需關(guān)心了，React 會以最高效的方式幫你完成。
這也就是所謂的單向數(shù)據(jù)流，在這種開發(fā)方式下，會讓你更新視圖的邏輯非常清晰、簡單，哪怕你的前端交互很復(fù)雜，也不至于讓你的代碼那么容易變成一坨。
是不是很爽？
面向組件編程上一部分說的 React 中更新視圖只需要更新數(shù)據(jù)就可以了，如果你覺得也就一般般吧，那下面要說的一定爽到爆。
先說一下什么是組件，顧名思義，組件就是用來組合成更高級東西的物件。打個比方，比如一輛汽車，汽車中的各種螺絲、鐵塊等零件就可以看作是一個個組件，這些小的組件我們還可以繼續(xù)組合，比如組合成發(fā)動機、輪胎、車架等有特定功能的組件，然后這些組件又可以繼續(xù)組合成一輛完整的汽車。
對應(yīng)到我們的前端開發(fā)中，HTML中的各種元素（如：div，table，input，select等）就是一個個最基本的組件，你可以把他們繼續(xù)組合，組合成第一部分說的名片，或者一個填寫用戶信息的表單，展示所用用戶的一個列表等有特定業(yè)務(wù)功能的組件，各種各樣的業(yè)務(wù)組件最終組合成一個完整的前端頁面。
組件最大的特點就是可以重復(fù)利用，比如說用戶名片這個組件，你可以放到個人信息頁面，也可以放到文章詳情頁面來展示作者信息，制作完成，到處利用。
言歸正傳，那在使用 React 是，是如何面向組件編程的呢，現(xiàn)在你可以這樣來理解，React 提供了一種可以創(chuàng)造新的 HTML 標(biāo)簽的能力。
例如第一部分講的用戶名片的例子，通過 React 你可以制作這樣一個組件：
而且更重要的是，你可以以如此簡單的方式在你應(yīng)用的任何位置重復(fù)利用。
你說，酷不酷，爽不爽？??！
至此以后，你在開發(fā)一個前端頁面時，你需要做的就是將頁面拆分成各種組件，然后把它們組合起來就好了。
在此想跟大家分享一點小經(jīng)驗，這也關(guān)系到你最終能不能將 React 用得很溜。就是：在前端開發(fā)過程中，要善于觀察和抽象。尤其是在項目前期，不要著急寫代碼，一定觀察項目的原型圖或者設(shè)計稿，想想哪些部分是可以拆分成可以復(fù)用的公共組件的。這樣做能讓你后面的工作，事半功倍。
在后面的文章中你將更深入地體會到這一點，同時你也會體會到 React 的組件化開發(fā)，到底是多么多么的爽?。?/p> 寫在最后
在閱讀上面內(nèi)容的時候，你可能會有一些疑惑，比如說你可能會質(zhì)疑“創(chuàng)建一個新的 HTML 標(biāo)簽這種說法”，這怎么可能呢？是的，深究原理的話，確實不是這樣，但是從開發(fā)者使用框架的角度，React 確實給了我們這樣的體驗。所以，希望大家在閱讀的時候跟著我的節(jié)奏來就好，所有的疑惑會隨著文章的推進，漸漸消退。
謝謝大家。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/88668.html
摘要：本人計劃編寫一個針對中初級前端開發(fā)者學(xué)習(xí)的系列教程玩轉(zhuǎn)。使用的原因是新的語言規(guī)范開發(fā)效率更高代碼更優(yōu)雅，尤其是基于開發(fā)的項目。其次也是目前特別流行的一個前端框架，截止目前，上有將近萬，國內(nèi)一二線互聯(lián)網(wǎng)公司都有深度依賴開發(fā)的項目。 本人計劃編寫一個針對中初級前端開發(fā)者學(xué)習(xí) React 的系列教程 - 《玩轉(zhuǎn) React》。 文章更新頻率：每周 1 ~ 2 篇。 目錄 玩轉(zhuǎn) React（...
摘要：屬性是一個組件的外部輸入。只會在開發(fā)模式下進行屬性類型檢查，當(dāng)代碼進行生產(chǎn)發(fā)布后，為了減少額外的性能開銷，類型檢查將會被略過。某個類的實例枚舉，屬性值必須為其中的某一個值。屬性為一個數(shù)組，且數(shù)組中的元素必須符合指定類型。 在第二篇文章 《新型前端開發(fā)方式》 中有說到 React 有很爽的一點就是給我們一種創(chuàng)造 HTML 標(biāo)簽的能力，那么今天這篇文章就詳細(xì)講解下 React 是如何提供這...
摘要：屬性是一個組件的外部輸入。只會在開發(fā)模式下進行屬性類型檢查，當(dāng)代碼進行生產(chǎn)發(fā)布后，為了減少額外的性能開銷，類型檢查將會被略過。某個類的實例枚舉，屬性值必須為其中的某一個值。屬性為一個數(shù)組，且數(shù)組中的元素必須符合指定類型。 在第二篇文章 《新型前端開發(fā)方式》 中有說到 React 有很爽的一點就是給我們一種創(chuàng)造 HTML 標(biāo)簽的能力，那么今天這篇文章就詳細(xì)講解下 React 是如何提供這...
摘要：綁定事件處理函數(shù)指向的四中方式以及他們的優(yōu)缺點。內(nèi)部自己實現(xiàn)了一套高效的事件機制，為了提高框架的性能，通過事件冒泡，只在節(jié)點上注冊原生的事件，內(nèi)部自己管理所有組件的事件處理函數(shù)，以及事件的冒泡捕獲。 前面的文章介紹了 React 的 JSX 語法、組件的創(chuàng)建方式、組件的屬性、組件的內(nèi)部狀態(tài)以及組件的生命周期。另外，還順帶說了各個知識點要重點注意的事情，以及我在項目實踐中的一些經(jīng)驗。如果...
閱讀 3288·2023-04-25 18:03
閱讀 1151·2021-11-15 11:38
閱讀 5560·2021-10-25 09:45
閱讀 847·2021-09-24 09:48
閱讀 2303·2021-09-22 15:34
閱讀 1742·2019-08-30 15:44
閱讀 2685·2019-08-30 13:12
閱讀 609·2019-08-29 16:05
