初識(shí)Reflux
- Reflux 是一個(gè)簡(jiǎn)單的單向數(shù)據(jù)流應(yīng)用庫(kù)谎懦，靈感來(lái)自于ReactJs Flux
- 解決了數(shù)據(jù)在React 應(yīng)用中的流動(dòng)方式及過(guò)程
需求分析
- 用 Reflux 實(shí)現(xiàn)界面渲染 hello world
分解任務(wù)
- 使用 React 創(chuàng)建一個(gè)組件横朋，在頁(yè)面渲染出 hello word
- 安裝 Reflux
- 創(chuàng)建一個(gè) Action
- 創(chuàng)建一個(gè) Store阳堕，用來(lái)監(jiān)聽(tīng)** Action **，并且獲取 Action 傳遞的 hello world
- Store 將值傳遞給 Component东囚，并且渲染到頁(yè)面
- 將代碼上傳至 Github
分步實(shí)現(xiàn)任務(wù)
- 使用 React 創(chuàng)建一個(gè)組件，在頁(yè)面渲染出 hello word
'use strict';
import React from 'react';
import {render} from 'react-dom';
const App = React.createClass({
render:function(){
return <div>
hello world
</div>
}
});
render(<App/>, document.getElementById("content"));
此時(shí)，使用 React 在頁(yè)面渲染出 hello world
安裝 Reflux
npm install reflux創(chuàng)建一個(gè) action
const action = Reflux.createActions(['getHello']);創(chuàng)建一個(gè) store嘀倒，用來(lái)監(jiān)聽(tīng)** action **，并且獲取 action 傳遞的 hello world
const store = Reflux.createStore({
listenables: [action],
onGetHello: function (hello) {
this.trigger(hello);
}
});
使用 listenables 來(lái)監(jiān)聽(tīng) **action **，使用this.trigger() 來(lái)更新數(shù)據(jù)狀態(tài)
- store 將值傳遞給 component测蘑，并且渲染到頁(yè)面
const App = React.createClass({
mixins: [Reflux.connect(store, "hello")],
componentDidMount: function () {
action.getHello("hello world!");
},
render: function () {
return <div>
{this.state.hello}
</div>
}
});
使用 mixins 將 store 和 component 連接 灌危，使用action .getHello()調(diào)用action
- 將代碼上傳至 github
源代碼地址
深入理解Reflux
- 三大主要內(nèi)容
- Action 是把數(shù)據(jù)從應(yīng)用傳到 Store 的有效載荷，是Store 數(shù)據(jù)的唯一來(lái)源碳胳，只用來(lái)描述“發(fā)生了什么”
- Store 負(fù)責(zé)封裝應(yīng)用的業(yè)務(wù)邏輯和數(shù)據(jù)交互
- Views（controller-views）是整個(gè)App 的 入口勇蝙，監(jiān)聽(tīng)Store 的變化以獲取新的數(shù)據(jù)，重新 render 自己及子組件
- 單向數(shù)據(jù)流
????Action ———————> Store ——————> View Component
???? ^
????└───────────────────────────────────┘
數(shù)據(jù)和操作在三者之間單向流動(dòng)
- 數(shù)據(jù)流動(dòng)問(wèn)題
Reflux 中主要由 Action 和 Store 組成挨约，例：當(dāng)組件 list 增加 Item 時(shí)浅蚪，會(huì)調(diào)用Action 某個(gè)方法（如addItem（data）并將新的數(shù)據(jù)當(dāng)參數(shù)傳遞進(jìn)去，通過(guò)事件機(jī)制烫罩，數(shù)據(jù)會(huì)傳送到 Store 中惜傲，Store 可以向服務(wù)器發(fā)送請(qǐng)求并提交給數(shù)據(jù)庫(kù)，數(shù)據(jù)更新后贝攒，再通過(guò)事件機(jī)制傳遞到 list 當(dāng)中盗誊，并更新 UI - 與 Redux 的區(qū)別
- Reflux 中去除了 Redux 中的 Dispatch 和 Reducer，保留了 Action 和 Store
-
概念關(guān)系圖對(duì)比如下：
Redux概念關(guān)系圖
Reflux概念關(guān)系圖
- 優(yōu)缺點(diǎn)
- 優(yōu)點(diǎn)：?jiǎn)蜗驍?shù)據(jù)流隘弊，數(shù)據(jù)流動(dòng)方向可以跟蹤哈踱，追查問(wèn)題的時(shí)候可以跟快捷
- 缺點(diǎn)：寫起來(lái)不太方便。要使UI發(fā)生變更就必須創(chuàng)建各種 Action 來(lái)維護(hù)對(duì)應(yīng)的 State
總結(jié)
- 學(xué)習(xí)過(guò)程中遇到的問(wèn)題
- 在開(kāi)始畫思維導(dǎo)圖的時(shí)候過(guò)于注重概念梨熙，沒(méi)有注重實(shí)踐开镣，浪費(fèi)了大量時(shí)間
- 在使用 ReactMixins 時(shí)因?yàn)檎也坏?react-mixins 的cdn，花了好長(zhǎng)時(shí)間
- 由于不想使用
ReactMixins.onclass()方法咽扇，將 ReactMixins 改成 mixins 花了好長(zhǎng)時(shí)間
- 經(jīng)驗(yàn)
- 以后學(xué)習(xí)新知識(shí)的時(shí)候要分清問(wèn)題的側(cè)重點(diǎn)邪财，確定目標(biāo)后再分步學(xué)習(xí)去完成目標(biāo)
- 學(xué)習(xí)知識(shí)要在最開(kāi)始確定任務(wù)范圍，盡量不引入別的新知識(shí)质欲，增加學(xué)習(xí)負(fù)擔(dān)
