摘要:應用架構是用來構建客戶端應用的一種應用架構體系。它是一種類似的架構,但是它更加簡單清晰,是一種單向數據流的架構設計。將數據和動作類型傳遞給去分發數據流是一個包含所有動作類型的常量對象一個分發中心,它管理著應用的所有數據流向。
Flux 應用架構
Flux是Facebook用來構建客戶端Web應用的一種應用架構體系。它是一種類似MVC的架構,但是它更加簡單、清晰,是一種單向數據流的架構設計。
Note
請事先對React和ES6進行了解。
本文采用Facebook官方的Flux。
快速入門$ git clone https://github.com/ipluser/react-flux-demo.git $ cd react-flux-demo $ npm start
瀏覽器將會自動打開一個新的網頁(若沒有,請訪問http://127.0.0.1:8080):
核心概念Flux應用主要分為四個主要的部門:Views, Actions, Dispatcher, Stores.
Name | Description |
---|---|
Views | 視圖層,React組件 |
Actions | 行為動作層,視圖層觸發的動作,例如click event |
Dispatcher | 分發中心,注冊/接受動作,調用數據流向中的回調函數 |
Stores | 數據層,管理應用狀態,廣播通知Views狀態發生改變 |
單向數據流是Flux應用的核心。Dispatcher, Stores, Views是獨立的輸入和輸出節點,而Action是一個包含數據和動作類型的簡單對象。
Views打開項目入口文件main.jsx:
// public/scripts/main.jsx import React from "react"; import ReactDOM from "react-dom"; import TodoController from "./components/todoController.jsx"; ReactDOM.render(, document.body);
上面代碼中采用了ReactJS Controller View模式,一個"Controller View"是應用中最頂層的組件,它管理著所有應用狀態,并以屬性方式傳遞給子組件。 接下來我們看看toToController.jsx:
// public/scripts/components/todoController.jsx import React from "react"; import TodoAction from "../actions/todoAction.js"; import TodoStore from "../stores/todoStore.js"; import Todo from "./todo.jsx"; export default class TodoController extends React.Component { constructor(props) { super(props); } newItem() { TodoAction.addItem("new item"); } render() { return; } }
正如你所看到的,TodoController僅僅給Todo子組件指定了newItem動作。Todo接收屬性和渲染組件:
// public/scripts/components/todo.jsx import React from "react"; import "../../styles/components/todo.scss"; export default function Todo(props) { let list = props.items.map((item, index) => { return
一旦點擊todo按鈕,TodoController將會觸發一個addItem動作。
ActionsTodoAction將數據和動作類型傳遞給Dispatcher去分發數據流:
// public/scripts/actions/todoAction.js import AppDispatcher from "../dispatcher.js"; import TodoConstant from "../constants/todoConstant.js"; class TodoAction { addItem(text) { AppDispatcher.dispatch({ actionType: TodoConstant.ADD_ITEM, text }); } } export default new TodoAction();
todoConstants.js是一個包含所有動作類型的常量對象:
// public/scripts/constants/todoConstant.js export default { ADD_ITEM: "TODO_ADD_ITEM" };Dispatcher
Dispatcher一個分發中心,它管理著應用的所有數據流向。每一個Store在這里注冊,并提供一個回調函數:
// public/scripts/dispatcher.js import { Dispatcher } from "flux"; import TodoStore from "./stores/todoStore"; import TodoConstant from "./constants/todoConstant"; const AppDispatcher = new Dispatcher(); TodoStore.dispatchToken = AppDispatcher.register(payload => { switch (payload.actionType) { case TodoConstant.ADD_ITEM: TodoStore.addItem(payload.text); break; default: } }); export default AppDispatcher;
上面代碼中可以看到,當TodoAction提供給Dispatcher一個新動作時,TodoStore將會通過注冊時的回調函數接受動作的行為。
StoresTodoStore包含狀態和業務邏輯。它的職責有點類似MVC中的model:
// public/scripts/stores/todoStore.js import EventEmitter from "events"; class TodoStore extends EventEmitter { constructor() { super(); this.items = []; } getAll() { return this.items; } addItem(text) { this.items.push(text); this.change(); } change() { this.emit("change"); } addListener(name, callback) { this.on(name, callback); } removeListener(name, callback) { this.removeListener(name, callback); } } export default new TodoStore();Views, again
再回到TodoController中,我們初始化應用的狀態,同時監聽Store的狀態改變事件:
// public/scripts/components/todoController.jsx import React from "react"; import TodoAction from "../actions/todoAction.js"; import TodoStore from "../stores/todoStore.js"; import Todo from "./todo.jsx"; export default class TodoController extends React.Component { constructor(props) { super(props); this.state = { items: TodoStore.getAll() }; this.onListChange = this.onListChange.bind(this); } componentDidMount() { TodoStore.addListener("change", this.onListChange); } componentWillUnmount() { TodoStore.removeListener("change", this.onListChange); } onListChange() { this.setState({ items: TodoStore.getAll() }); } newItem() { TodoAction.addItem("new item"); } render() { return; } }
一旦TodoController接受到應用狀態改變,將會觸發Todo重新渲染。
參考Facebokk Flux
Andrew - Controller-View
ruanyifeng - Flux 架構入門教程
源代碼react-flux-demo
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/11751.html
摘要:應用這說明并不是單指設計給用的,它是獨立的一個函數庫,可通用于各種應用。在數據流的最后,要觸發最上層組件的,然后進行整體的重新渲染工作。單純在的對象上是沒有辦法使用,要靠額外的函數庫才能這樣作,這是一定要使用類似像這種函數庫的主要原因。 Redux的官網中用一句話來說明Redux是什么: Redux是針對JavaScript應用的可預測狀態容器 這句話雖然簡短,其實是有幾個涵義的: ...
摘要:當響應時,通過已注冊的回調函數,將提供的數據負載發送給應用中的所有。對外只暴露,不允許提供禁止在任何地方直接操作。是單例作為中的事件分發中心,同時還要管理所有中的事件。 React Flux架構簡介 個人現階段對Flux架構的理解,求拍磚求star!原文鏈接:https://github.com/kuitos/kuitos.github.io/issues/27 React 簡介請戳 ...
摘要:應用架構是用來構建客戶端應用的一種應用架構體系。它是一種類似的架構,但是它更加簡單清晰,是一種單向數據流的架構設計。將數據和動作類型傳遞給去分發數據流是一個包含所有動作類型的常量對象一個分發中心,它管理著應用的所有數據流向。 Flux 應用架構 Flux是Facebook用來構建客戶端Web應用的一種應用架構體系。它是一種類似MVC的架構,但是它更加簡單、清晰,是一種單向數據流的架構設...
摘要:光憑一個是無法實現血緣關系疏遠的組件之間的狀態同步的。就是為解決這個問題而生的。,處理動作的派發,相當于架構的。我們的主角是,它也是目前社區最受歡迎的狀態管理框架。專題一覽考古實用中間件時間旅行 本文是『horseshoe·Redux專題』系列文章之一,后續會有更多專題推出來我的 GitHub repo 閱讀完整的專題文章來我的 個人博客 獲得無與倫比的閱讀體驗 React的橫空出世給...
閱讀 3096·2021-02-22 17:12
閱讀 719·2019-08-30 15:55
閱讀 3079·2019-08-30 15:54
閱讀 1384·2019-08-29 16:56
閱讀 1862·2019-08-29 15:13
閱讀 1716·2019-08-29 13:19
閱讀 601·2019-08-26 13:40
閱讀 2822·2019-08-26 10:26