mobx, 简单,可以扩展的状态管理

分享于 

15分钟阅读

GitHub

  繁體 雙語
Small library for creating observable properties, functions and arrays
  • 源代码名称:mobx
  • 源代码网址:http://www.github.com/mobxjs/mobx
  • mobx源代码文档
  • mobx源代码下载
  • Git URL:
    git://www.github.com/mobxjs/mobx.git
    Git Clone代码到本地:
    git clone http://www.github.com/mobxjs/mobx
    Subversion代码到本地:
    $ svn co --depth empty http://www.github.com/mobxjs/mobx
    Checked out revision 1.
    $ cd repo
    $ svn up trunk
    

    logo

    MobX

    简单,规模管理。

    Build StatusCoverage StatusJoin the chat at https://gitter.im/mobxjs/mobxDiscuss MobX on HashnodeOpenCollectiveOpenCollectivecode style: prettier

    MobX是由 Mendix。Coinbase。Facebook开放源码和许多个人赞助商自豪的。

    MendixCoinbaseFacebook Open Source

    安装
    • 安装: npm install mobx --save 响应绑定: npm install mobx-react --save 要启用ESNext装饰器( 可选),请参见下面的内容。
    • CDN:

    翻译

    正在启动

    简介

    MobX是测试库,通过透明地应用功能React性编程( TFRP ),使状态管理变得简单和。 behind MobX的哲学非常简单:

    可以从应用程序状态派生的任何内容都应该派生。 自动。

    其中包括 UI。数据序列化。服务器通信等。

    MobX unidirectional flow

    React和MobX是一个强大的组合。 通过提供机制将它的转换为可以呈现组件的树,React呈现应用程序状态。 MobX提供了存储和更新响应的应用程序状态的机制。

    React和MobX都为应用程序开发中常见问题提供了非常优化和独特的解决方案。 response提供了通过使用虚拟DOM来优化呈现UI的机制,这减少了昂贵的DOM。 MobX提供了使用React组件最优化应用程序状态的机制,只是在严格需要时才更新。

    的核心概念

    MobX只有几个核心概念。 下面的代码Fragment可以使用 codesandbox示例在线尝试。

    可以观察状态

    Egghead.io 第 1课:观察&观察器。

    MobX向现有数据结构( 如对象。数组和类实例) 添加可以观察的功能。 这可以通过使用 @observable的decorator注释你的类属性来完成。

    classTodo {
     id =Math.random();
     @observable title ="";
     @observable finished =false;
    }

    使用 observable 就像将对象的属性转换为电子表格单元格。 但是与电子表格不同,这些值既可以是原始值,也可以是引用。对象和数组。 你甚至可以定义你自己的可以观察的数据源。

    在 ES5.ES6和 ES.next 环境中使用 MobX。

    如果这些 @ 东西对你看起来陌生,这些是 ES.next 装饰器。 在MobX中使用它们是完全可选的。 有关如何使用或者避免它们的详细信息,请参阅文档。 MobX在任何ES5环境下运行,但是利用 ES.next 等特性在使用MobX时是pie上的。 本自述文件的其余部分使用 decorator,但是记住,它们是可选的。

    例如在 good good 上面 Fragment看起来像:

    functionTodo() {
     this.id=Math.random()
     extendObservable(this, {
     title:"",
     finished:false })
    }

    计算值

    Egghead.io 第 3课:计算值

    使用 MobX,你可以定义在修改相关数据时自动派生的值。 使用 @computed 修饰器,或者在使用 (extend)Observable 时使用 getter/setter函数。

    classTodoList {
     @observable todos = [];
     @computed getunfinishedTodoCount() {
     returnthis.todos.filter(todo=>!todo.finished).length;
     }
    }

    MobX将确保在添加todo时自动更新 unfinishedTodoCount 或者修改了一个 finished 属性之一。 像Excel这样的电子表格程序中的计算类似于公式。 仅在需要时自动更新。

    React

    Egghead.io 第 9课:自定义React

    React与计算值相似,而非生成新值,React产生副作用,例如打印到控制台,并以增量方式更新响应,如输出到控制台,imperative命令树,命令。

    响应组件

    Egghead.io 第 1课:观察&观察器。

    如果使用React,只需将( 无状态函数) 组件从 mobx-react 包添加到它们上,即可将你的组件转换为React性组件( decorator )。

    importReact, {Component} from'react';importReactDOMfrom'react-dom';import {observer} from'mobx-react';
    @observerclassTodoListViewextendsComponent {
     render() {
     return<div><ul> {this.props.todoList.todos.map(todo=><TodoView todo={todo} key={todo.id} /> )}
     </ul> Tasks left: {this.props.todoList.unfinishedTodoCount}
     </div> }
    }constTodoView=observer(({todo}) =><li><input
     type="checkbox" checked={todo.finished}
     onClick={() =>todo.finished=!todo.finished}
     />{todo.title}
     </li>)conststore=newTodoList();ReactDOM.render(<TodoListView todoList={store} />, document.getElementById('mount'));

    observer 将React( 函数) 组件转换为它们所呈现数据的。 使用MobX时,没有智能或者哑组件。 所有组件都巧妙地呈现,但以一种愚蠢的方式定义。 MobX将只是在需要时确保组件总是在需要时呈现,但也不只是这样。 所以 上面 示例中的onClick 处理程序将强制呈现正确的TodoView,如果未完成任务数,则会导致 TodoListView 呈现。 但是,如果要删除 Tasks left 行( 或者将它的放入单独的组件中),则当倒置一个框时,TodoListView 将不再呈现。 你可以通过更改 JSFiddle 来验证这一点。

    自定义React

    可以使用 autorunreaction 或者when 函数创建自定义React,以满足特定情况。

    例如以下 autorun 在每次 unfinishedTodoCount 更改时都打印一条日志消息:

    autorun(() => {
     console.log("Tasks left: "+todos.unfinishedTodoCount)
    })

    :将对什么React

    为什么每次更改 unfinishedTodoCount 时都会打印新消息? 答案是这个拇指法则:

    MobX对在跟踪函数执行期间读取的任何现有属性作出响应。

    关于MobX如何决定哪些观察者需要React的深度解释,检查了解哪个MobX对它做出响应。

    操作

    Egghead.io 第 5课:操作指南。

    许多流量框架不同,MobX是关于如何处理用户事件的unopinionated。

    • 这可以用类似的方式来完成。
    • 或者通过使用RxJS处理事件。
    • 或者通过最直接的方式来处理事件,如 上面 onClick 处理程序所示。

    最后,全部归结为: 不知为何应该更新状态。

    在更新状态后,MobX 将以有效的方式处理它的余的问题。 这样简单的语句,比如 below,就足以自动更新用户界面。

    对于触发事件,调用调度程序或者其他事件,没有任何技术需要。 最终的React组件不仅仅是你状态的奇妙表示。 将由MobX管理的派生。

    store.todos.push(
     newTodo("Get Coffee"),
     newTodo("Write simpler code")
    );store.todos[0].finished=true;

    不过,MobX有一个可选的actions 概念。 使用它们,它们将帮助你更好地构造代码,并且更好地决定何时修改状态。

    MobX: 简单且可以扩展

    MobX是你可以用于状态管理的最不常用的库之一。 这使得 MobX 方法不仅简单,而且具有很高的可扩展性:

    使用类和真实引用

    使用 MobX,你不需要规范化数据。 这使得库非常适合非常复杂的域模型( 在Mendix中,例如 ~500 在单个应用程序中使用不同的域类)。

    的引用完整性是保证

    由于数据不需要规范化,MobX自动跟踪状态和派生之间的关系,从而获得参照完整性。 呈现通过三个间接级别访问的内容?

    没问题,MobX会跟踪它们,当其中一个引用改变时就会呈现。 因此过时 Bug 是过去的事情。 作为程序员,你可能会忘记更改某些数据可能会影响角案例中看起来不相关的组件。 MobX不会忘记。

    更简单的操作更容易维护

    如 上面 所示,使用MobX时修改状态非常简单。 你只要写下你的意图。 MobX会负责剩下的。

    细粒度可观性

    MobX构建应用程序中所有导出的图表,以找到预防过期时间所需的最少数量。 with可以能听起来很昂贵,MobX构建了一个虚拟派生图,以减少导致导子与状态同步的recomputations数。

    实际上当测试MobX时,我们发现使用这个库来跟踪代码中的关系通常要比使用基于手写事件或者基于选择器的容器组件来推动代码的关系更有效。

    简单的原因是MobX会在你的数据上建立更精细的'侦听器',这样你就可以做程序员了。

    它的次,MobX可以看出导子之间的因果,因这里它可以不同的方式运行两次或者引入故障。

    如何工作请参见这个的深入解释 MobX。

    易于互操作性

    MobX使用普通的javascript结构。 由于它的unobtrusiveness,它与大多数javascript库一起工作,不需要MobX特定的库风格。

    因此,你可以简单地使用现有的路由器。数据获取和实用库,比如 react-routerdirectorsuperagentlodash 等等。

    同样的原因,你可以在服务器和客户端中使用它,在同构的应用程序和React本机。

    结果是,在使用MobX比较它的他状态管理解决方案时,你经常需要学习更少的新概念。

    Credits

    MobX的灵感来自于电子表格中的React性编程原则。 它通过MeteorJS跟踪框架,knockout 和 Vue.js.,但MobX带来透明功能React编程,提供了一个独立的实现。 它在小故障。同步。可以预测和有效的方式中实现 TFRP。

    为在真实。复杂和高性能应用领域提供了灵活性和支持的灵活性和支持,为 Mendix 提供了大量的credits。

    finally 对所有相信。尝试。验证甚至是赞助商的人来说,都是。

    进一步的资源和文档

    其他人说。

    伪装,#mobx 不是 pubsub,或者你的Pattern的观察者。 不是,它是一个精心编排的可以观察尺寸入口,由动力宇宙驱动。 它不做变化检测,它实际上是一个 20级灵灵带有灵魂刀,把你的视线切成提交。

    在使用了几个星期的#mobx 项目之后,将它引入团队非常令人惊讶。 时间:1/2, 乐趣:2 X

    使用 #mobx 基本上是一个连续的循环,"这太简单了,绝对不能工作"只能被证明是错误

    试着把mobXReact给 es6,你会喜欢的,你会喜欢的。

    我已经与MobX建立了大型应用,并与使用之前的比较,更容易阅读,更容易理解。

    #mobx 是我一直想要的方式 ! 简单而快速的 ! 非常棒不要错过它 !

    • 请随意发送小请求请求。 请先讨论GitHub问题中的新特性或者大变化。
    • 使用 npm test 运行基本测试套件,测试套件的npm run coverage,以及性能测试的npm run perf 和。

    流支持

    MobX附带流 typings。 导入mobX模块时,流将自动包含它们。 你可以使用以下方式显式地导入这些类型,但你不需要明确导入这些类型: import type {.. . } from 'mobx'

    要使用流 typings,请使用 MobX:

    • .flowconfig 中,你不能忽略 node_modules
    • .flowconfig 中,你无法在 [libs] 部分中显式地将它的导入。
    • 不需要使用流类型安装库定义。

    Bower 支持

    Bower 支持通过臭名昭著的unpkg.com: 提供 bower install https://unpkg.com/mobx/bower.zip

    然后使用 lib/mobx.umd.js 或者 lib/mobx.umd.min.js

    捐赠

    是MobX使你的项目成功的关键? 加入我们的开放集体,或者使用捐赠按钮。

    支持者

    支持我们每月捐赠并帮助我们继续我们的活动。 [ become a backer ]

    通过paypal一次性捐赠也受欢迎,并被记录在赞助商的列表中。

    Donate

    赞助商

    成为主办方,并在我们的自述文件上获取你的logo,并与你的网站链接。 [become a sponsor ]


    STA  MAN  STAT  SCA  Scala  State  
    相关文章