- Notifications
You must be signed in to change notification settings - Fork0
React 的資料流架構模式
NotificationsYou must be signed in to change notification settings
QueenieCplusplus/React_flux
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
React 的單向資料流架構模式
建議將這些元件關注在分離，可做單元測試。
Model, store 儲存 (商業邏輯與資料的互動)
Controller, dispatch 分配器為應用程式的中樞。算是種單例 Singleton。（利用 Action 介面定義分配器, Action 也可視為應用程式中的領域特定語言 domain-specific-language）
View, view 視圖 (render 渲染應用程式的元件樹)
UI 的每一個動作會送到分配器。 它雖然不是核心元件，但構成分配器的 分配器於資料儲存中， 領域定義語言。（使用者動作被翻譯成分配器動作） 註冊回呼函式， 例如：新增、刪除、修改。 分配器也管理依賴。 Action ------> Dispatcher ------> callbacl | | | V Web API ------> Action Creator Store 封裝商業邏輯與應用程式資料的互動，沒有 setter，新增通過資料儲存的變更事件送回應用程式，更新則通過分配器來到 store。 | | | V button onChange(Event){ input ------ Views <------ return{}; }
// UI Action -> Dispatcher
var App = React.createClass({ // Action AppAction: { save: function(){}, delete: function(id){}, update: function(id){}, get: function(res){} }, // UI Action -> Dispatcher clickHandler: function(){ // onSave is a Dispather this.props.onSave(this.state.id); }, render: function(){ return( // onClick = {this.method} , this is bind html event to UI action to this class <div> <button onClick={this.clickHandler}> Save Info Now </button> </div> ); } });// View -> UI Action
var UIController = React.createClass({ render: function(){ var props = merge( {}, this.state.app, {onSave = this.saveHandler}; ); return App(props); } });// Dispatcher -> Store
Dispatcher.register(function(payload){ switch(payload.actionType){ case AppConstants.Record: AppStore.save(payload.res); } });// Store -> Event -> View
AppStore.prototype.save = function(res){ this.emitChange(); } var UI= React.createClass({ changeHandler: function(){ AppStore.listout(function(id){ }); }, componentDidMount: function(){ AppStore.addChangeListener(this.changeHandler); }, componentWillUnMount: function(){ AppStore.removeChangeListener(this.changeHandler); } })https://www.bookstack.cn/read/reactjs101-zh-tw/Ch07-react-flux-introduction.md
About
React 的資料流架構模式
Topics
Resources
Uh oh!
There was an error while loading.Please reload this page.
Stars
Watchers
Forks
Releases
No releases published
Packages0
No packages published