玩轉 React（二）- 新型前端開發方式

這是《玩轉 React》系列的第二篇。在該篇中，咱們來了解下，React 的出現到底給咱們的開發方式帶來了什麼樣的變化。

個人感觸能夠用一個字來形容，爽！主要爽在如下兩個方面。

視圖是數據的映射（單向數據流）

React 是一個視圖層的框架，所謂視圖層就是咱們在網頁上能看到的部分。在傳統的方式中，咱們經過編寫HTML代碼來設計網頁的結構，經過 JavaScript 以及 getElementById 等 api 來獲取某個節點，經過節點的 innerHTML，innerText，appendChild 等屬性或者方法（或者你也可能用JQuery）來更新視圖。

在 React 時代，你除了須要本身考慮網頁的結構和CSS樣式外，視圖的更新 React 通通幫你搞定。

那麼，用了 React 咱們如何來更新視圖呢，先看下面這個張圖：

在 React 中視圖是數據的映射，你想要視圖發生變化，那你只要改變數據就行了，就是這麼簡單。

舉個簡單的例子，你打算在你的頁面上展現用戶的名片，名片上有照片、姓名、年齡、地址等基本信息，以下圖所示：

這個名片，做爲視圖的一部分，在 React 中是由某個用戶的數據映射而來的，可能長得像這樣：

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

若是你但願網頁的瀏覽者，能夠切換查看不一樣用戶的名片，你要作的只是用下一個用戶的數據替換一下當前的數據就能夠了。至於新的數據是如何替換掉頁面上的舊數據的，就無需關心了，React 會以最高效的方式幫你完成。

這也就是所謂的單向數據流，在這種開發方式下，會讓你更新視圖的邏輯很是清晰、簡單，哪怕你的前端交互很複雜，也不至於讓你的代碼那麼容易變成一坨。

是否是很爽？

面向組件編程

上一部分說的 React 中更新視圖只須要更新數據就能夠了，若是你以爲也就通常般吧，那下面要說的必定爽到爆。

先說一下什麼是組件，顧名思義，組件就是用來組合成更高級東西的物件。打個比方，好比一輛汽車，汽車中的各類螺絲、鐵塊等零件就能夠看做是一個個組件，這些小的組件咱們還能夠繼續組合，好比組合成發動機、輪胎、車架等有特定功能的組件，而後這些組件又能夠繼續組合成一輛完整的汽車。

對應到咱們的前端開發中，HTML中的各類元素（如：div，table，input，select等）就是一個個最基本的組件，你能夠把他們繼續組合，組合成第一部分說的名片，或者一個填寫用戶信息的表單，展現所用用戶的一個列表等有特定業務功能的組件，各類各樣的業務組件最終組合成一個完整的前端頁面。

組件最大的特色就是能夠重複利用，好比說用戶名片這個組件，你能夠放到我的信息頁面，也能夠放到文章詳情頁面來展現做者信息，製做完成，處處利用。

言歸正傳，那在使用 React 是，是如何面向組件編程的呢，如今你能夠這樣來理解，React 提供了一種能夠創造新的 HTML 標籤的能力。

例如第一部分講的用戶名片的例子，經過 React 你能夠製做這樣一個組件：

<Card name="sarike" age="18" address="北京" />

並且更重要的是，你能夠以如此簡單的方式在你應用的任何位置重複利用。

你說，酷不酷，爽不爽？！！

至此之後，你在開發一個前端頁面時，你須要作的就是將頁面拆分紅各類組件，而後把它們組合起來就行了。

在此想跟你們分享一點小經驗，這也關係到你最終能不能將 React 用得很溜。就是：在前端開發過程當中，要善於觀察和抽象。尤爲是在項目前期，不要着急寫代碼，必定觀察項目的原型圖或者設計稿，想一想哪些部分是能夠拆分紅能夠複用的公共組件的。這樣作能讓你後面的工做，事半功倍。

在後面的文章中你將更深刻地體會到這一點，同時你也會體會到 React 的組件化開發，究竟是多麼多麼的爽！！

寫在最後

在閱讀上面內容的時候，你可能會有一些疑惑，好比說你可能會質疑「建立一個新的 HTML 標籤這種說法」，這怎麼可能呢？是的，深究原理的話，確實不是這樣，可是從開發者使用框架的角度，React 確實給了咱們這樣的體驗。因此，但願你們在閱讀的時候跟着個人節奏來就好，全部的疑惑會隨着文章的推動，漸漸消退。

謝謝你們。