React Flux架构简介
React 简介请戳这里。
Flux是什么
Flux是Facebook用来构建客户端Web应用的应用架构。它利用单向数据流的方式来组合React中的视图组件。它更像一个模式而不是一个正式的框架,开发者不需要太多的新代码就可以快速的上手Flux。
Flux的核心部分
1. dispatcher
事件调度中心,flux模型的中心枢纽,管理着Flux应用中的所有数据流。它本质上是Store的回调注册。每个Store注册它自己并提供一个回调函数。当Dispatcher响应Action时,通过已注册的回调函数,将Action提供的数据负载发送给应用中的所有Store。应用层级单例!!
2. store
负责封装应用的业务逻辑跟数据的交互。
-
Store中包含应用所有的数据
-
Store是应用中唯一的数据发生变更的地方
-
Store中没有赋值接口---所有数据变更都是由dispatcher发送到store,新的数据随着Store触发的change事件传回view。Store对外只暴露getter,不允许提供setter!!禁止在任何地方直接操作Store。
3. view
-
controller-view 可以理解成MVC模型中的controller,它一般由应用的顶层容器充当,负责从store中获取数据并将数据传递到子组件中。简单的应用一般只有一个controller-view,复杂应用中也可以有多个。controller-view是应用中唯一可以操作state的地方(setState())
-
view(UI组件) ui-component 职责单一只允许调用action触发事件,数据从由上层容器通过属性传递过来。
4. 其他
action creators 作为dispatcher的辅助函数,通常可以认为是Flux中的第四部分。ActionCreators是相对独立的,它作为语法上的辅助函数以action的形式使得dispatcher传递数据更为便利。
How Flux(Unidirectional Data Flow) Works
view --> actionCreators
action dispatch
1
2
3
4
5
6
7
8
9
10
11
12
13
|
// NavActionCreators.js export default {
clickNav(nav){
AppDispatcher.dispatch(
{
type: ActionTypes.CLICK_NAV,
nav
}
);
}
}; |
dispatcher --> store callback
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
AppDispatcher.register(action => { switch (action.type) {
// nav点击
case ActionTypes.CLICK_NAV:
IndexWebAPIUtils.getGiftList(_currentUserInfo.userId, action.nav.id)
.then( function (giftList) {
_currentGiftList = giftList;
IndexStore.emitChange();
});
break ;
// no default
}
}); |
store emitChange --> controller view --> setState
Flux vs MVVM
MVVM
1. 简单的MVVM
2. 复杂的MVC
Flux
1. 复杂的Flux
Flux的优势
1. 数据状态变得稳定同时行为可预测
因为angular双向绑定的原因,我们永远无法知道数据在哪一刻处于稳定状态,所以我们经常会在angular中看到通过setTimeout的方式处理一些问题(其实有更优雅的解决方案,不在本次讨论之内)。同时由于双向绑定的原因,行为的流向我们也很难预测,当视图的model变多的时候,如果再加上一堆子视图依赖这些model,问题发生时定位简直是噩梦啊(这也是angular的错误信息那么不友好的原因,因为框架开发者也无法确定当前行为是谁触发的啊,绑定的人太多了...)。但是这里还是要强调一点就是,并不是说双向绑定就一定会导致不稳定的数据状态,在angular中我们通过一些手段依然可以使得数据变得稳定,只是双向绑定(mvvm)相对于flux更容易引发数据不稳定的问题。
2. 所有的数据变更都发生在store里
flux里view是不允许直接修改store的,view能做的只是触发action,然后action通过dispatcher调度最后才会流到store。所有数据的更改都发生在store组件内部,store对外只提供get接口,set行为都发生在内部。store里包含所有相关的数据及业务逻辑。所有store相关数据处理逻辑都集中在一起,避免业务逻辑分散降低维护成本。
3. 数据的渲染是自上而下的
view所有的数据来源只应该是从属性中传递过来的,view的所有表现由上层控制视图(controller-view)的状态决定。我们可以把controller-view理解为容器组件,这个容器组件中包含若干细小的子组件,容器组件不同的状态对应不同的数据,子组件不能有自己的状态。也就是,数据由store传递到controller-view中之后,controller-view通过setState将数据通过属性的方式自上而下传递给各个子view。
4. view层变得很薄,真正的组件化
由于2、3两条原因,view自身需要做的事情就变得很少了。业务逻辑被store做了,状态变更被controller-view做了,view自己需要做的只是根据交互触发不同的action,仅此而已。这样带来的好处就是,整个view层变得很薄很纯粹,完全的只关注ui层的交互,各个view组件之前完全是松耦合的,大大提高了view组件的复用性。
5. dispatcher是单例的
对单个应用而言dispatcher是单例的,最主要的是dispatcher是数据的分发中心,所有的数据都需要流经dispatcher,dispatcher管理不同action于store之间的关系。因为所有数据都必须在dispatcher这里留下一笔,基于此我们可以做很多有趣的事情,各种debug工具、动作回滚、日志记录甚至权限拦截之类的都是可以的。
Flux的困境
1. 过多的样板代码
flux只是一个架构模式,并不是一个已实现好的框架,所以基于这个模式我们需要写很多样板代码,代码量duang的一下子上来了。。不过好在目前已经有很多好用的基于flux的第三方实现,目前最火的属redux。
2. dispatcher是单例
dispatcher作为flux中的事件分发中心,同时还要管理所有store中的事件。当应用中事件一多起来事件时序的管理变得复杂难以维护,没有一个统一的地方能清晰的表达出dispatcher管理了哪些store。
3. 异步处理到底写在哪里
按flux流程,action中处理:依赖该action的组件被迫耦合进业务逻辑
按store职责在store中处理:store状态变得不稳定,dispatcher的waitFor失效
4. 至今还没有官方实现
写在最后
前端摩尔定律:前端每18个月难度增加一倍
相关推荐
React通量锅炉板简单的 React Flux Boiler 板来理解 Flux 架构的概念。 应用程序很简单,在按钮上单击我们正在生成随机数,并且生成的内容正在以“/”分隔的方式附加到 UI 中。 我们在这里学到的概念是组件之间的...
你将全面学习React的用法以及React生态系统中的其他工具和库(如React Router和Flux架构),并了解采用组合方式创建接口的*佳实践。本书简明扼要地讲解每个主题,并呈现助你高效完成工作的细节。书中严谨深刻地讲述...
覆盖React、Flux、Redux及可视化,帮助开发者在实践中深入理解技术和源码, 前端组件化主流解决方案,一本书玩转React“全家桶”, 本书讲解了非常多的内容,不仅介绍了面向普通用户的API、应用架构和周边工具,还...
覆盖React、Flux、Redux及可视化,帮助开发者在实践中深入理解技术和源码 前端组件化主流解决方案,一本书玩转React“全家桶” 本书讲解了非常多的内容,不仅介绍了面向普通用户的API、应用架构和周边工具,还深入...
覆盖React、Flux、Redux及可视化,帮助开发者在实践中深入理解技术和源码 前端组件化主流解决方案,一本书玩转React“全家桶” 本书讲解了非常多的内容,不仅介绍了面向普通用户的API、应用架构和周边工具,还深入...
覆盖React、Flux、Redux及可视化,帮助开发者在实践中深入理解技术和源码 前端组件化主流解决方案,一本书玩转React“全家桶” 本书讲解了非常多的内容,不仅介绍了面向普通用户的API、应用架构和周边工具,还深入...
覆盖React、Flux、Redux及可视化,帮助开发者在实践中深入理解技术和源码, 前端组件化主流解决方案,一本书玩转React“全家桶”, 本书讲解了非常多的内容,不仅介绍了面向普通用户的API、应用架构和周边工具,还...
覆盖React、Flux、Redux及可视化,帮助开发者在实践中深入理解技术和源码,前端组件化主流解决方案,一本书玩转React“全家桶”。 本书讲解了非常多的内容,不仅介绍了面向普通用户的API、应用架构和周边工具,还深入...
它试图通过将您希望已经理解的东西缓慢地转变为根据Flux架构原理构建的东西(听起来多么宏大)来做到这一点。 先决条件 尽管本教程尝试尽可能地适合初学者,但它确实对您的背景做了一些假设。 它假设: 熟悉...
我对在 Flux 架构中使用 react 很感兴趣,这就是为什么我想在确定路由器之前评估一些可用的路由器。 我想选择与 Flux 最兼容的路由器 目标 了解如何使用 react-router 了解嵌套路由的实际含义 我如何处理重定向、...
固执己见的React redux saga架构示例项目(正在进行中) 观看演示 如何执行这个专案 将此仓库分叉/克隆到本地计算机 使用yarn安装依赖项 yarn install 启动开发服务器 yarn start 设计模式 助焊剂 Flux是一种在...
Github repos 搜索示例应用程序 抽象的 此应用程序是使用以下语言和技术的测试: ... Flux 架构对于这个演示来说可能有点矫枉过正,但它是理解它的良好开端。 我认为,从这些第一步开始,这个应用程序可以很好地发展。
为了理解核心原理,我们建议您阅读精通的flux和React式编程文档。 ReactorKit是用于React式单向Kotlin应用程序体系结构的框架。 该存储库介绍了ReactorKit的基本概念,并描述了如何使用ReactorKit构建应用程序。 ...
学习助焊剂架构从上的样板开始,这是在不依赖Facebook开始的一切前提下理解Flux架构的尝试。 npm install -g gulpnpm install用于建筑 gulp 默认的gulp将使源代码不完整,使用带有JSX编译的react转换运行browserify...