【巷子】---flux---【react】

一、什么是Flux

　　Flux 是一种架构思想，专门解决软件的结构问题。它跟MVC 架构是同一类东西，但是更加简单和清晰。

二、flux的基本概念

　　(1) 、Flux由4部分组成

　　1、View：视图层

　　2、Action(动作)：视图发出的消息(比如mouseClick)

　　3、Dispatcher( 派发器 ) ：用来接收Action、执行回调函数

　　4、Store(数据层)：用来存放应用的状态，一旦发生改动，就提醒View更新页面

　　(2)、Flux的流程
　　1、用户访问View

　　2、View发送用户的Action

　　3、Dispatcher收到Action,要求Store进行相对应的更新

　　4、Store更新后，发出一个“onchange”事件

　　5、view接受到“onchange”事件后，更新页面

三、store代码流程

四、组件中调用Store

import Store from "./store";

class App extends Component{

constructor(props){

super(props);

//调用公共数据

this.state = Store.getState();

}

五、创建Dispatcher.js

安装flux:cnpm install flux --save-dev

(1)在View层的方法中创建Action并传递给dispatcher 方法: dispatcher.dispatch(Action)

(2)判断类型Action的type是否相等，如果相等则调用Store的方法进行修改数据(注意：修改数据的方法只能在Store中使用，这样的方式很类似于后端的MVC模式)

六、监听数据变化

数据发生改变View层页面进行更新

(1)在Store中有提供数据改变的函数，在数据改变的函数中调用事件触发this.on("事件名称")

(2)同时在Store中在创建一个函数，函数内部进行事件监听供View层调用，当事件触发时会调用这个函数，然后我们this.setState进行数据的改变

Store中的事件监听和触发

组件中调用事件监听的方法用于改变数据

如果还想细化代码结构我们还可以将Action分离出去(尝试一下)

在项目中Store和dispatcher可以有多个，非常灵活

除此之外我们的View层既有view层又有controller层所以我们还可以进行再次拆分

转载于:https://www.cnblogs.com/nanianqiming/p/9870194.html

【巷子】---flux---【react】相关推荐

flux react php,Vue的Flux框架之Vuex状态管理器
学习vue之前,最重要是弄懂两个概念,一是"what",要理解vuex是什么:二是"why",要清楚为什么要用vuex. Vuex是什么? Vuex 类似 Re ...
2017年 JavaScript 框架回顾 -- React生态系统
前一篇文章中,我们介绍了2017年 JavaScript 框架的整体情况.我们也了解到在众多的前端框架中,目前最为庞大又在快速增长的当属 React 了,本文就来重点介绍 React 的生态系统. 首 ...
前端切换视图_前端架构 101（五）：从 Flux 进化到 Model-View-Presenter
李熠:前端架构 101(一):在谈论它们之前我们需要达成的共识zhuanlan.zhihu.com 李熠:前端架构 101(二): MVC 初探zhuanlan.zhihu.com 李熠:前端架构 ...
「首席架构师推荐」React生态系统大集合
关于React生态系统的一系列令人敬畏的事情. React React一般资源 React社区 React在线游乐场 React教程 React通用教程 React钩子 React和TypeScrip ...
sqlbulkcopy是覆盖式更新吗_React 328道最全面试题(持续更新)
今天的React题没有太多的故事-- 半个月前出了248个Vue的知识点,受到很多朋友的关注,都强烈要求再出多些React相前的面试题,受到大家的邀请,我又找了20多个React的使用者,他们给出了3 ...
qml延迟代码_选择C而不是QML将您的代码减少80
qml延迟代码 Many tools rely on web technologies like JavaScript and HTML for mobile app development. But ...
小公司卧薪尝胆三年，意外拿到美团offer
点击上方"IT平头哥联盟",选择"置顶或者星标" 与您一起成长- 作者|码农怪话编辑|小胡我叫王小闰(花名),非科班出身,野生前端从业者,在小公司打杂三年后 ...
Flux -- Redux -- Redux React 基础实例教程
本文的目的很简单,介绍Redux相关概念用法及其在React项目中的基本使用假设你会一些ES6.会一些React.有看过Redux相关的文章,这篇入门小文应该能帮助你理一下相关的知识一般来说,推 ...
构建具有用户身份认证的 React + Flux 应用程序
序言:这是一篇内容详实的 React + Flux 教程,文章主要介绍了如何使用 API 获取远程数据以及如何使用 JSON Web Tokens 进行用户身份认证.在阅读本文之后,我一直使用文章介绍 ...
实操《深入浅出React和Redux》第二期—Flux
2019独角兽企业重金招聘Python工程师标准>>> 此书讲得蛮详细, 从Flux一步一步过渡到Redux. 写过的代码舍不得扔, 立此存照吧. 我有几张阿里云幸运券分享给你,用券 ...

【巷子】---flux---【react】

【巷子】---flux---【react】相关推荐

最新文章

热门文章