你的位置:首页 > 软件开发 > Java > Flux

Flux

发布时间:2017-01-21 12:00:05
本文的目的很简单,介绍Redux相关概念用法 及其在React项目中的基本使用 假设你会一些ES6、会一些React、有看过Redux相关的文章,这篇入门小文应该能帮助你理一下相关的知识一般来说,推荐使用 ES6+React+Webpack 的开发模式,但Webpac ...

Flux

本文的目的很简单,介绍Redux相关概念用法 及其在React项目中的基本使用

 

假设你会一些ES6、会一些React、有看过Redux相关的文章,这篇入门小文应该能帮助你理一下相关的知识

一般来说,推荐使用 ES6+React+Webpack 的开发模式,但Webpack需要配置一些东西,你可以先略过,本文不需要Webpack基础

入门,只是一些基础概念和用法的整理,更完整的内容推荐去看看文档,英文,中文

(不过我个人认为,官方文档的例子相对来说太复杂了,很难让新手马上抓住重点)

(官方的例子正统且联系业务,不同类型的操作或数据放在不同文件中,很规范,但也很绕,所以本文使用的例子非常简单,且直接放在一个文件中 以便于理解)

 

搭飞机前往:

Flux思想Redux基本概念Redux的使用Redux在React中的使用(同步)Redux在React中的使用(异步,使用中间件)

 

一、Flux

Flux是一种概念思想,或者说是一种应用架构

根据它的概念,一个应用中的数据流动应是单向的,且应用中的所有数据保存在一个位置,数据变化时保证视图也同步变化,保证了数据和视图的状态是一一对应起来的

此应用应该分为四层:

  • view层:应用的视图,页面的(数据)展示
  • action层:(视图)发出的某些动作,比如点击事件
  • dispatcher层:派发器,接收action并处理这些动作,更新数据
  • store层:存放应用的数据,数据更新后,提醒view层更新视图

Flux

它的概念思想可能一时半会理解不了,没关系,过段时间就好了

 

二、Redux

上面说到,Flux只是一个思想,我们可以根据这个思想来自己实现出一个技术方案,来解决问题

是要解决什么问题呢?

在使用React的过程中,在组件间通信的处理上我们用了回调的方式,如果组件层级很深,不同组件间的数据交流就会导致回调及其触发的函数非常多,代码冗杂

需要一个状态管理方案,方便管理不同组件间的数据,及时地更新数据

而Flux思想中的Store层,切合了这个问题

 

1. 什么是Redux

Redux是受Flux启发实现的一个技术方案,可以认为它是Flux的产物,但它并没有沿用Flux所有的思想

主要区别是Flux的派发器dispatcher,Redux认为使用派发器就得增加事件订阅/发布的规则,倒不如直接用函数调用的方式来得实在,简单而统一,所以就将处理action的任务交给了store层(直接调用这个对象的dispatch方法)

2. 什么时候用Redux

Redux说简单简单,因为也就几个API,理解好概念就好用了;说复杂也复杂,因为它将一个应用分成了不同部分(action、处理action、store数据等),在正规的项目中是推荐将各部分区分到不同文件中的(如官方的例子),文件数量很多可能会比较难管理,当然,细粒化了也就减少了耦合度。最后还要加个操作把Redux的数据更新给React组件(如果用了React)

在大多数情况下,Redux是不需要用的,如UI层非常简单,没有太多互动的

  • 用户的使用方式非常简单
  • 用户之间没有协作
  • 不需要与服务器大量交互,也没有使用 WebSocket
  • 视图层(View)只从单一来源获取数据

 

而在多交互,多数据源的时候可以考虑使用

  • 用户的使用方式复杂
  • 不同身份的用户有不同的使用方式(比如普通用户和管理员)
  • 多个用户之间可以协作与服务器大量交互,或者使用了WebSocketView
  • 要从多个来源获取数据

在需要管理复杂组件状态的时候,可以考虑使用

  • 某个组件的状态,需要共享某个状态
  • 需要在任何地方都可以拿到一个组件
  • 需要改变全局状态一个组件
  • 需要改变另一个组件的状态

 

3. 开始用Redux

上面讲了那么多字,还是看代码来得实在

这里先纯粹讲Redux,毕竟它和React是没啥关系的

首先是环境配置,基本上都会使用ES6,所以Babel的支持是必须的

然后是Redux的支持,如果使用Webpack打包编译,就用npm安装个redux包

这里采用直接在浏览器引入的方式,使用 这个库

  <body>    <div id="box"></div>    <script type="text/javascript" src='/images/loading.gif' data-original="../lib/react.js"></script>    <script type="text/javascript" src='/images/loading.gif' data-original="../lib/react-dom.js"></script>    <script type="text/javascript" src='/images/loading.gif' data-original="../lib/redux.min.js"></script>    <script type="text/javascript" src='/images/loading.gif' data-original="../build/reduxStart.js"></script>  </body>

原标题:Flux

关键词:

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

可能感兴趣文章

我的浏览记录