React 編程思想翻譯及學習筆記

第一步：把UI圖按組件層次結構拆分開

1. FilterableProductTable (橙色): 包含整個例子
2. SearchBar (藍色): 接收全部用戶輸入
3. ProductTable (綠色): 基於用戶輸入顯示與過濾數據集
4. ProductCategoryRow (青綠色): 顯示每組數據歸類標題
5. ProductRow (紅色): 顯示每一行數據

層次結構以下：

• FilterableProductTable
  • SearchBar
  • ProductTable
    • ProductCategoryRow
    • ProductRow

第二步：用React作出一個靜態版的UI

如今你已經有了層次結構，是時候要實現應該了，最簡單的方法就是用你的數據模型來作一個版本而後渲染UI但不須要交互。最好就是把過程解偶開，只須要寫不須要想太多交互的東西。

建的時候，你將要想用props傳數據的方式來重用別的組件。props是一種數據由父傳子的方式。若是你熟悉state的概念，不要只用state來作靜態版本。由於它只用來作交互，即數據常常改變時用上。

你能夠由上而下或者由下而上來作，即你能夠從最高層FilterableProductTable或者由最低層ProductRow開始。但一般，簡單項目通常是由上而下；大型項目，則由下而上更好，並要編寫測試。

最後，你將有一個能夠重用的組件庫來渲染數據模型。組件只有render()方法，由於它只是一個靜態版本。最高層FilterableProductTable將負責接收數據模型做爲prop使用。若是你修改數據模型，再調用ReactDOM.render()就能夠更新到UI。很是簡單就能看到你的UI更新了什麼和哪裏作了修改，由於React是經過單向數據流或者叫單向數據綁定來同步數據與UI而且速度很是快。

第三步：識別出最小並完整的UI狀態

思考咱們例子中全部數據碎片. 咱們有:

• 初始列的全部產品
• 搜索輸入框文字內容
• 勾選框狀態
• 過濾後的產品列表

那讓咱們看看哪一個是能夠用做state。簡單的對這些數據問3個問題。

1. 它是從父用過props傳過來的嗎？若是是它很能夠就不是state。
2. 它是常常變化的嗎？若是不是，它不是state。
3. 你能夠經過其餘的組件中的state或者props來計算到它嗎？若是是，它就不是state。

初始列的全部產品是經過props傳進來的，因此它不是state。搜索輸入框文字內容和勾選框狀態很是似state，由於他們能夠常常改而且不能從其餘組件計算獲得。最後，過濾後的產品列表不是state，由於它是能夠經過搜索輸入框文字內容和勾選框狀態結合初始列的全部產品計算出來的。

因此最後，咱們的state是：

• 搜索輸入框文字內容
• 勾選框狀態

第四步：識別你的state將寄生於哪裏。

好，如今咱們已經識別出應用的state集。下一步，咱們須要識別哪些組件修改或者擁有這些state

記住：React是單向數據流結構。它可能不會立刻清晰是哪一個組件擁有什麼state。 這對新手來講常常是最有挑戰性的部分, 所以要跟着這些步驟來弄清楚:

對於你的應用中的每個state:

• 弄清楚每一個組件基於這個state渲染些什麼。
• 找一個共同宿主組件(一個全部組件之上的組件在結構上須要這個state)。
• 要麼是這個共同宿主組件，要麼是另外一個在層次之上的組件應該擁有這個state。
• 若是你找不到這個組件，能夠爲了用來存儲state去在結構或者層次之上新建一個組件來作這事。

讓咱們用這策略來應該到咱們的應用上吧:

• ProductTable 須要基於state來過濾產品列表， SearchBar 須要顯示搜索文字和勾選狀態
• 它們共同宿主是 FilterableProductTable。
• 概念上過濾內容值和勾選值寄生於 FilterableProductTable絕對是能夠的。

好，那咱們就這樣作吧。首先，爲FilterableProductTable增長一個getInitialState()方法，返回值是{filterText: '', inStockOnly: false}來反映應用的初始狀態。而後，把filterText 和inStockOnly 做爲props傳給ProductTable 和SearchBar。最後用這些props來過濾ProductTable 的行和設置ProductTable 中表單的值。

你能夠開始看到你的應該將如何表現：設置filterText 爲"ball"並刷新頁面。你應該能夠看到數據表已經正確更新。

第五步：添加反向數據流

若是你嘗試去在這版本上輸入或者打勾 ，你將看到React會忽略你的輸入。這是有意爲之，由於咱們已經設了輸入框的 prop值老是等於FilterableProductTable 傳過來的state值。

React使得數據流 準確地容易的明白你的程序如何工做，但比傳統的雙向數據綁定須要寫得更多一點 代碼。React提供一個叫ReactLink 的插件讓這模式使用起來與雙向數據綁定同樣式 方便，但這文章的目的，是要保持全部東西都清晰。

若是你嘗試去在這版本上輸入或者打勾 ，你將看到React會忽略你的輸入。這是有意爲之，由於咱們已經設了輸入框的 prop值老是等於FilterableProductTable傳過來的state值。

讓咱們想一想咱們要些什麼。咱們想要確保不管什麼時候用戶改變了表單，咱們 就更新state值去反映用戶輸入。既然組件應該只更新他們本身的state，那麼不管 什麼時候state應該更新時，FilterableProductTable將傳一個回調函數給SearchBar 並觸發它。咱們能夠用輸入框的onChange事件去接收它。而後 FilterableProductTable傳來的回調函數將執行setState()函數，以後咱們的應 用將被更新。

雖然這樣聽起來比較複雜，但也就那麼幾行代碼。你的數據如何在應用中流轉將會很清晰 。

RunJS源碼：http://runjs.cn/code/cgfurbyq

引用自：http://facebook.github.io/react/docs/thinking-in-react.html