小白视角看iflux

2018-03-02  本文已影响0人  形而下z

目录

参考文档

本人纯前端小白，学习两周基本知识后遇到了一个全新的框架----iflux，写此博客整理和记录学习内容。先将参考文档列出来，方便大（自）家（己）的翻阅。

what is iflux ?

什么是iflux呢？其实我也不知道，项目上要用而已（逃~~~）。首先，我们先看iflux在npm上的 官方文档 。

what is iflux ?

iflux = immutable.js + react.js

这个式子不懂没关系。继续往下翻文档，找到了这么一句话：

xxxxxxxx
xxxxxxxx
于是，顺其自然的写了iflux去更好的粘合React和immutable。

看到这里，思路就很清晰了：想学iflux，得先去学React和immutable。

react.js + immutable.js

React 是一个用于构建用户界面的 js 库，最大的特点就是使用virtual DOM来对页面进行描述。第一次看代码时找了很久都没找到HTML文件在哪，请教后才发现所有的标签都在React组件的render方法中。当React组件的参数（props）和状态（state）发生改变时，就会触发其生命周期，render方法中的虚拟DOM就会对界面进行刷新。页面刷新的效率非常高。

总体流程就是这样了。组件化也是React的特征之一，render方法是React组件的重要生命周期。当用户对界面进行操作时，只要修改props和state属性的值，就能快速的对用户操作进行反馈。但是，React毕竟只是管理界面的工具，对props和state的数据不能进行充分的管理，这时就要用到专门处理数据的Immutable。

Immutable的出现，解决了JS中的一个痛点：JS中的对象是引用赋值，新的对象简单的引用了原始对象，两个对象指向同一个地址，共享一个内存空间。这样就会使得原始对象中的数据变得不可靠。
程序猿们为了解决这个问题发明了“浅拷贝”与“深拷贝”，其实就是把原对象的数据拷贝一份放在新的对象中。这样做显得很笨重，而且浪费内存空间。
immutable给出的解决方法就是对原数据对象新建一个代理对象。当数据发生变动时，新生成变动数据的备份，与其他不变的数据一起返回给新的变量。虽然两者共享了数据，但是变量是指向两个不同的地址的。这样就能既完成值传递，又能节省内存了。
当然immutable也有其他的优点，但其处理数据对象的高效完美的与React的参数数据契合，使用immutable来管理React的状态(state)就变得理所当然了。

flux简介

介绍完React和Immutable，界面和数据都能进行处理了，那我们完全可以将所有的数据都作为React组件的state属性，当任意数据发生改变即状态(state)发生改变，就立即会刷新界面。flux便是在此设想上进行了完善形成的。

Flux将一个应用分成四个部分：

  • View： 视图层
  • Action（动作）：视图层发出的消息（比如mouseClick）
  • Dispatcher（派发器）：用来接收Actions、执行回调函数
  • Store（数据层）：用来存放应用的状态，一旦发生变动，就提醒Views要更新页面

图为flux的运转流程，在我们设想的基础上，完成了数据的"单向流动"，数据变得可控是flux的优点之一。Flux 架构入门教程中介绍了Action和Dispatcher，完全可以跳过不看，我看了也只得出一个结论：太繁杂了！这就给flux提供了改良的空间，也是iflux出现的重要原因。

iflux简介

此时我们再打开 iflux 官方介绍 看一看iflux的流程图。

+-----------------------+
|       WebApi          |
+-----------------------+
          |  
         \|/
+-----------------------+
|   Store（immutable）   |<-----+
+-----------------------+      |
           | //es5 style       |
           | StoreMixin        | msg(EventEmitter)
          \|/                  |
+------------------------+     |
|     React App          |-----|
+------------------------+
|      <Layout>          |
|        <SearchForm/>   |
|        <Toolbar/>      |
|        <DataGrid/>     |
|       </Layout>        |
+------------------------+

iflux针对flux的Action和Dispatcher的分层，提出了一个解决方案：一个应用只有一个Store，单根数据源。这样就完全不需要Action和Dispatcher了，使得框架更加的扁平化。文档中作者的思路说的很清楚。

整体思路：
上一篇下一篇

猜你喜欢

热点阅读