摘要:应用架构是用来构建客户端应用的一种应用架构体系。它是一种类似的架构,但是它更加简单清晰,是一种单向数据流的架构设计。将数据和动作类型传递给去分发数据流是一个包含所有动作类型的常量对象一个分发中心,它管理着应用的所有数据流向。
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
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/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的横空出世给...
阅读 2937·2021-02-22 17:12
阅读 521·2019-08-30 15:55
阅读 2795·2019-08-30 15:54
阅读 1262·2019-08-29 16:56
阅读 1755·2019-08-29 15:13
阅读 1565·2019-08-29 13:19
阅读 480·2019-08-26 13:40
阅读 2685·2019-08-26 10:26