注意：擴展 指的是實現(xiàn)一個類似于 奇妙清單 的todos的思考
先設(shè)計Redux 的 state
根據(jù)應(yīng)用的功能來設(shè)計state的數(shù)據(jù)存儲結(jié)構(gòu)
對于一個todos畜疾，有兩個數(shù)據(jù)需要存儲：
- 過濾器（就是當(dāng)前選擇顯示的todos）纱皆，如：顯示所有的todos杰妓、顯示未完成的todos或者顯示完成的todos
- todos的信息
- text
- completed
- deleted
Redux state的數(shù)據(jù)結(jié)構(gòu)就是：
{
visibilityFilter: 'SHOW_ALL',
todos: [
{
text: 'Consider using Redux',
completed: true,
},
{
text: 'Keep all state in a single tree',
completed: false
}
]
}
擴展
- 過濾器
- todos的信息
- text：todo的信息
- folder：該todo所屬folder
- completed：完成狀態(tài)
- deleted：刪除狀態(tài)
- createTime：創(chuàng)建時間
- finishedTime：：完成時間
設(shè)計component層級（Hierarchy）
Think in React
設(shè)計一個web app 的流程
第一步：將UI解剖到 Component Hierarchy中
在這個過程中突诬，應(yīng)該如何將UI解剖成單個的組件呢顿苇？或者說我們?nèi)绾未_定這一部分可以作為一個組件存在界酒？
遵循一個原則：單一職責(zé)原則葵第，也就是說一個組件只做一件事
一般來說绘迁，如果數(shù)據(jù)模型合理，那么就很好將數(shù)據(jù)模型映射到UI組件上羹幸，因為UI和數(shù)據(jù)模型一般都是遵循相同的架構(gòu)脊髓，所以，只需要將數(shù)據(jù)模型分解為代表UI的各個組件即可
將UI拆分為各個組件之后栅受，要畫出組件層級圖将硝，表明各組件的層級關(guān)系，也就是它們之間是如何進行嵌套的
第二步：Build A Static Version in React
就是將第一步劃分的component屏镊，按照Component 層級關(guān)系拼接成一個沒有交互的版本;
注意：不要使用state來構(gòu)建該版本依疼，state僅僅是為了交互而存在的
構(gòu)建該版本有兩種方式：
- 依照component Hierarchy從頂向下構(gòu)建，也就是從最上層的組件開始編寫
-
從下向上構(gòu)建而芥，從最底層的組件開始編寫
對于簡單項目來說律罢，采用從頂向下比較好，而對于復(fù)雜應(yīng)用來說棍丐，使用從下向上更加適合
數(shù)據(jù)從最頂層的component與data model進行通信误辑，然后通過props向下面的子組件傳遞數(shù)據(jù)
React遵循單向數(shù)據(jù)流
最頂層的組件一般都是Container component，而它下面的子組件很大一部分都是Presentation component歌逢。
第三步：構(gòu)建能夠反映UI狀態(tài)的最小數(shù)據(jù)模型(state)
其實就是設(shè)計數(shù)據(jù)存儲框架贩疙，也就是model的架構(gòu)
在React中有兩種數(shù)據(jù)模型（model）：props和state
這時讨永，我們要判斷出我們的應(yīng)用程序中盖溺，哪些是state莫鸭，哪些是props潦匈？
首先，列出我們的應(yīng)用程序所有的數(shù)據(jù)
然后依照下面的規(guī)則來判斷哪些數(shù)據(jù)是state赚导，規(guī)則如下：
- 如果這個數(shù)據(jù)是父組件通過props傳遞下來的茬缩，那么該數(shù)據(jù)就不屬于state
- 如果該數(shù)據(jù)隨著時間保持不變，那么它很可能不屬于state
- 該數(shù)據(jù)是否能通過你組件中的其他state或props計算出來吼旧，如果可以凰锡，它很可能不是state
第四步：標(biāo)識出state應(yīng)該傳遞給哪些組件
對于新手，這一步往往會很困惑黍少，可以遵循下面的幾條規(guī)則：
- 如果一個組件需要依靠該state來進行刷新寡夹，那么你需要將state傳遞給它
- 在component hierarchy中，層次結(jié)構(gòu)較高的組件可能需要改state
第五步：增加逆向數(shù)據(jù)流
因為子組件不能直接更改父組件傳遞下來的數(shù)據(jù)厂置，所以菩掏，需要為子組件的行為綁定事件處理程序，該處理程序通過父組件傳遞下去
參考：https://facebook.github.io/react/docs/thinking-in-react.html
使用Redux 和 React
在上面的構(gòu)建出了最小數(shù)據(jù)模型之后要開始設(shè)計Redux的actions和reducer
