這是《玩轉 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 確實給了我們這樣的體驗。所以，希望大家在閱讀的時候跟著我的節奏來就好，所有的疑惑會隨著文章的推進，漸漸消退。
謝謝大家。
PS：本系列的所有文章將在 segmentfault 和 掘金同步釋出。
本作品保留所有權利。未獲得許可人許可前，不允許他人複製、發行、展覽和表演作品。不允許他人基於該作品創作演繹作品 。