注意：擴(kuò)展 指的是實(shí)現(xiàn)一個(gè)類似于 奇妙清單 的todos的思考
先設(shè)計(jì)Redux 的 state
根據(jù)應(yīng)用的功能來(lái)設(shè)計(jì)state的數(shù)據(jù)存儲(chǔ)結(jié)構(gòu)
對(duì)于一個(gè)todos，有兩個(gè)數(shù)據(jù)需要存儲(chǔ)：
- 過(guò)濾器（就是當(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
}
]
}
擴(kuò)展
- 過(guò)濾器
- todos的信息
- text：todo的信息
- folder：該todo所屬folder
- completed：完成狀態(tài)
- deleted：刪除狀態(tài)
- createTime：創(chuàng)建時(shí)間
- finishedTime：：完成時(shí)間
設(shè)計(jì)component層級(jí)（Hierarchy）
Think in React
設(shè)計(jì)一個(gè)web app 的流程
第一步：將UI解剖到 Component Hierarchy中
在這個(gè)過(guò)程中，應(yīng)該如何將UI解剖成單個(gè)的組件呢？或者說(shuō)我們?nèi)绾未_定這一部分可以作為一個(gè)組件存在？
遵循一個(gè)原則：單一職責(zé)原則，也就是說(shuō)一個(gè)組件只做一件事
一般來(lái)說(shuō)，如果數(shù)據(jù)模型合理，那么就很好將數(shù)據(jù)模型映射到UI組件上，因?yàn)閁I和數(shù)據(jù)模型一般都是遵循相同的架構(gòu)，所以，只需要將數(shù)據(jù)模型分解為代表UI的各個(gè)組件即可
將UI拆分為各個(gè)組件之后，要畫出組件層級(jí)圖，表明各組件的層級(jí)關(guān)系，也就是它們之間是如何進(jìn)行嵌套的
第二步：Build A Static Version in React
就是將第一步劃分的component，按照Component 層級(jí)關(guān)系拼接成一個(gè)沒有交互的版本;
注意：不要使用state來(lái)構(gòu)建該版本，state僅僅是為了交互而存在的
構(gòu)建該版本有兩種方式：
- 依照component Hierarchy從頂向下構(gòu)建，也就是從最上層的組件開始編寫
-
從下向上構(gòu)建，從最底層的組件開始編寫
對(duì)于簡(jiǎn)單項(xiàng)目來(lái)說(shuō)，采用從頂向下比較好，而對(duì)于復(fù)雜應(yīng)用來(lái)說(shuō)，使用從下向上更加適合
數(shù)據(jù)從最頂層的component與data model進(jìn)行通信，然后通過(guò)props向下面的子組件傳遞數(shù)據(jù)
React遵循單向數(shù)據(jù)流
最頂層的組件一般都是Container component，而它下面的子組件很大一部分都是Presentation component。
第三步：構(gòu)建能夠反映UI狀態(tài)的最小數(shù)據(jù)模型(state)
其實(shí)就是設(shè)計(jì)數(shù)據(jù)存儲(chǔ)框架，也就是model的架構(gòu)
在React中有兩種數(shù)據(jù)模型（model）：props和state
這時(shí)，我們要判斷出我們的應(yīng)用程序中，哪些是state，哪些是props？
首先，列出我們的應(yīng)用程序所有的數(shù)據(jù)
然后依照下面的規(guī)則來(lái)判斷哪些數(shù)據(jù)是state，規(guī)則如下：
- 如果這個(gè)數(shù)據(jù)是父組件通過(guò)props傳遞下來(lái)的，那么該數(shù)據(jù)就不屬于state
- 如果該數(shù)據(jù)隨著時(shí)間保持不變，那么它很可能不屬于state
- 該數(shù)據(jù)是否能通過(guò)你組件中的其他state或props計(jì)算出來(lái)，如果可以，它很可能不是state
第四步：標(biāo)識(shí)出state應(yīng)該傳遞給哪些組件
對(duì)于新手，這一步往往會(huì)很困惑，可以遵循下面的幾條規(guī)則：
- 如果一個(gè)組件需要依靠該state來(lái)進(jìn)行刷新，那么你需要將state傳遞給它
- 在component hierarchy中，層次結(jié)構(gòu)較高的組件可能需要改state
第五步：增加逆向數(shù)據(jù)流
因?yàn)樽咏M件不能直接更改父組件傳遞下來(lái)的數(shù)據(jù)，所以，需要為子組件的行為綁定事件處理程序，該處理程序通過(guò)父組件傳遞下去
參考：https://facebook.github.io/react/docs/thinking-in-react.html
使用Redux 和 React
在上面的構(gòu)建出了最小數(shù)據(jù)模型之后要開始設(shè)計(jì)Redux的actions和reducer
