Reflux
来源:互联网 发布:mysql 合计行 编辑:程序博客网 时间:2024/06/11 02:31
初识Reflux
- Reflux 是一个简单的单向数据流应用库,灵感来自于ReactJs Flux
- 解决了数据在React 应用中的流动方式及过程
需求分析
- 用 Reflux 实现界面渲染 hello world
分解任务
- 使用 React 创建一个组件,在页面渲染出 hello word
- 安装 Reflux
- 创建一个 Action
- 创建一个 Store,用来监听* Action ,并且获取 **Action 传递的 *hello world
- Store 将值传递给 Component,并且渲染到页面
- 将代码上传至 Github
分步实现任务
- 使用 React 创建一个组件,在页面渲染出 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"));
此时,使用 React 在页面渲染出 hello world
* 安装 Reflux
npm install reflux
创建一个 action
const action = Reflux.createActions(['getHello']);
创建一个 store,用来监听* action ,并且获取 **action 传递的 *hello world
const store = Reflux.createStore({ listenables: [action], onGetHello: function (hello) { this.trigger(hello); } });
使用 listenables
来监听 action ,使用this.trigger()
来更新数据状态
- store 将值传递给 component,并且渲染到页面
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()
调用action
- 将代码上传至 github
源代码地址
深入理解Reflux
- 三大主要内容
- Action 是把数据从应用传到 Store 的有效载荷,是Store 数据的唯一来源,只用来描述“发生了什么”
- Store 负责封装应用的业务逻辑和数据交互
- Views(controller-views)是整个App 的 入口,监听Store 的变化以获取新的数据,重新 render 自己及子组件
单向数据流
Action ———————> Store ——————> View Component
^
└───────────────────────────────────┘数据和操作在三者之间单向流动
数据流动问题
Reflux 中主要由 Action 和 Store 组成,例:当组件 list 增加 Item 时,会调用Action 某个方法(如addItem(data)并将新的数据当参数传递进去,通过事件机制,数据会传送到 Store 中,Store 可以向服务器发送请求并提交给数据库,数据更新后,再通过事件机制传递到 list 当中,并更新 UI- 与 Redux 的区别
- Reflux 中去除了 Redux 中的 Dispatch 和 Reducer,保留了 Action 和 Store
- 概念关系图对比如下:
- 优缺点
- 优点:单向数据流,数据流动方向可以跟踪,追查问题的时候可以跟快捷
- 缺点:写起来不太方便。要使UI发生变更就必须创建各种 Action 来维护对应的 State
总结
- 学习过程中遇到的问题
- 在开始画思维导图的时候过于注重概念,没有注重实践,浪费了大量时间
- 在使用 ReactMixins 时因为找不到 react-mixins 的cdn,花了好长时间
- 由于不想使用
ReactMixins.onclass()
方法,将 ReactMixins 改成 mixins 花了好长时间
- 经验
- 以后学习新知识的时候要分清问题的侧重点,确定目标后再分步学习去完成目标
- 学习知识要在最开始确定任务范围,尽量不引入别的新知识,增加学习负担
0 0
- Reflux
- Reflux
- React Reflux
- ReFlux详解
- Reflux详解
- Reflux详解
- 初学Reflux
- ReFlux细说
- React Reflux
- Reflux helloworld
- reflux web 中action
- reflux web 中store
- reflux react 例子
- react爬坑记16---reflux
- Redux和Reflux研究
- react ReFlux细说
- Reflux 简单使用
- Reflux.connect mixin 学习
- Android 事件处理
- 【Linux4.1.12源码分析】二层报文发送之报文GSO分段(TCP)
- Octave中的简单控制语句
- Android Studio 如何依赖第三方项目详解
- viewpage
- Reflux
- Python入门教程四:绘制奥林匹克环的标志
- 【codevs】 1766 装果子 二分
- Ubuntu安装Apache PHP Mysql phpmyadmin Memcache CURL
- JSP的5个动作指令
- apt-get命令
- Nginx负载均衡实现tomcat集群方案简要小结
- OpenJudge noi 8468单词序列
- keepalived 双机热备