Mobx浅析与简单实践

2017-12-25 admin

响应式编程介绍

从不同层面来看,响应式的表象很多

从视图层来说,主流的框架都是响应式的,模型变化自动驱动视图变化,注意,这里说的是自动,这也是响应式最本质的概念(当某些东西改变后自动产生side effect),angularjs中的脏监测、vue使用的对象属性劫持等内部机制都是保障了模型到视图层面的自动响应

从异步,事件的角度来说,Rxjs给我们提供了一种统一的解决思路,所有的东西都是stream,不管是同步的、异步的,事件、还是未来的,我们可以用相同的方式处理

数据层面,Mobx专注于解决数据级别的响应,它不关系数据的来源方式,只要一个对象中的属性、一个基本类型变量发生了变化,对这些数据的订阅就会自动执行

mobx和rxjs是一种互补的关系,两种专注的层面不同,rxjs响应数据的来源,mobx响应数据的变化

例如:如果想在更新state之前对用户的输入操作节流,大致工作流是

DOM events -> RxJS -> Update state -> MobX -> Update UI
//rxjs用来处理事件,自动节流,Mobx来响应数据的变化

专注数据层面响应式的mobx

mobx的核心思想是让一切需要应用状态的东西,在需要的时候,都能自动获取需要的数据,比如说

class Todo{

    @observable list=[]

    @computed get listCount(){
        return this.list.length
    }
    //listCount借助于list数组,当数组的长度发生变化时,使用listCount的地方自动变化
}

或者

class TodoStore{
    @observable list=[]
}

@observer
class Todo extends React.Component{
    render(){
        return this.props.todoStore.list.map(x=>{

        })
    }
}
 //当list变化时,Todo组件重新render

state:就是代表应用的当前状态,纯数据,数据驱动视图嘛

derivations: 类似vue中的computed,使用@computed定义,怎么理解呢?学angularjs或react时,都会接触到一个概念,就是代表当前视图的模型数据应该尽可能没有重复的,用最少的数据来保证视图的正常变化

举个例子,有一个页面渲染一个列表,并展示列表的数量

class TodoList extends React.Component{

    constructor(props){
        super(props)
        this.state={
            list:[]
        }
    }
    render(){
        return (
            <div>
                <label>count: {this.state.list.length}</label>
                //render list
            </div>
        )
    }
}

这里没有为展示数量单独在state中定义一个length属性,使用state.lists.length可以间接的得到数量,

_derivations_就是用来计算那个可以通过state间接计算来的值

Reactions:代表剩下的那些需要对state变化动态作出反应的东西,比如说react的重新render,数据变化时自动重新ajax请求

举个例子: 一个搜索功能,我们有一个store类,代表应用的状态,有一个observable字段search,代表页面中input标签的用户输入值,当用户输入东西的时候,自动发送查询请求,这里,对search的变化自动发送ajax请求就是一个 reactions

class SearchGit{
      @observable search = ''

      constructor(){
           autorunAsync(() => {
                if (!this.search) return
                fetchRepos(this.search)
            }, 1000)
      }
}

actions: 改变state的操作,显式申明更好

简单实践

PS(从mobx仓库的首页中发现一个在线写代码的网站codesanbox,和jsfiddle等比起来颜值简直不能再高。。。。这个小练习就是直接在上面编辑的,不足之处就是不支持样式文件的方式,样式只能写成style)

初步实践总结:

  1. mobx提供一个autorunAsync,实现类似去抖的功能,不错

  2. 对于实现一个滚动加载,结合数据的自动响应式,流程还是很清晰的

  3. mobx只关注数据的变化,对状态存储在哪,异步请求写在哪没有一套最佳实践,持续探索吧

参考

Ten minute introduction to MobX and React

Mobx vs Reactive Stream Libraries (RxJS, Bacon, etc)

The introduction to Reactive Programming you’ve been missing

流动的数据——使用 RxJS 构造复杂单页应用的数据逻辑

[转载]原文链接:https://github.com/xiyuyizhi/notes/issues/4

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-5108.html

文章标题:Mobx浅析与简单实践

相关文章
性能与生态双突破 HTML5重现爆发曙光
走过早熟的WebAPP,也经历过概念性的“轻应用”,HTML5这个被视作移动互联网未来的技术标准,终于在2015年看到了爆发的曙光。1月 15日,搜狐发布基于HTML5的“手机搜狐网3.0,加上微信几天前开放HTML5接口,HTML5很可能...
2015-11-12
bootstrap table之通用方法( 时间控件,导出,动态下拉框, 表单验证 ,选中与获取信息)代码分享
1.bootstrap-table 单击单行选中 $(&#x27;#gzrwTable&#x27;).on(&#x27;click-row.bs.table&#x27;, function(e, row, $element) { $(&#x...
2017-02-17
最简单的JavaScript图片轮播代码(两种方法)
通过改变每个图片的opacity属性: 素材图片: 代码一: &lt;!DOCTYPE html&gt; &lt;html lang=&quot;en&quot;&gt; &lt;head&gt; &lt;meta cha...
2017-03-21
2015年预测:Web体验与以往的五大不同
在过去的一年,我们见证了Uber的崛起、Apple加入了可穿戴设备的竞赛中、以及诸如Facebook收购Whatapp这类大的并购事件。那么在2015年我们将看到哪些巨大的改变?这里列出了五个对未来的预测 更清洁、简单的内容 2013年...
2015-11-11
详解使用vue-router进行页面切换时滚动条位置与滚动监听事件
按照正常的产品逻辑,我们在进行页面切换时滚动条应该是在页面顶部的,可是。。。在使用vue-router进行页面切换时,发现滚动条所处的位置被自动记录了下来,且在另一个组件内定义的滚动监听事件仍会运行,着实吃了一大惊。。。 说说我的破解方法:...
2017-03-13
JavaScript深入之类数组对象与
类数组对象 所谓的类数组对象: 拥有一个 length 属性和若干索引属性的对象 举个例子: var array = [&#x27;name&#x27;, &#x27;age&#x27;, &#x27;sex&#x27;]; var ...
2017-05-27
javascript数据结构与算法之检索算法
查找数据有2种方式,顺序查找和二分查找。顺序查找适用于元素随机排列的列表。二分查找适用于元素已排序的列表。二分查找效率更高,但是必须是已经排好序的列表元素集合。 一:顺序查找 顺序查找是从列表的第一个元素开始对列表元素逐个进行判断,直到找到...
2017-03-22
纯JavaScript实现html转pdf的简单实例(推荐)
项目开发中遇到了一个变态需求,需要把一整个页面导出为pdf格式,而且要保留页面上的所有的表格、svg图片和样式。 简而言之,就是希望像截图一样,把整个页面截下来,然后保存成pdf。 咋不上天呢…… 查了一下,能够实现html转pdf的方法还...
2017-03-16
bootstrap实现的自适应页面简单应用示例
本文实例讲述了bootstrap实现的自适应页面简单应用。分享给大家供大家参考,具体如下: &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset=&#x27;u...
2017-03-14
javascript实现的字符串与十六进制表示字符串相互转换方法
本文实例讲述了javascript实现的字符串与十六进制表示字符串相互转换方法。分享给大家供大家参考。具体如下: 之所以写这个,是因为发现SQL注入和XSS中经常利用十六进制表示的字符串,比如 SELECT CONCAT(0x68656c6...
2017-03-27
回到顶部