初见mobX

先看如下的代码

const {observable}= mobox;
const {observer}=mobxReact;
const {Component}=React;
const appState=observable({count:0
})
appState.increment=function(){this.count++
}
appState.decrement=function(){this.count--
}
@observer class Counter extends Component{render(){return(<div>Counter:{appState.count}<button onClick={this.handleInc}>+</button><button onClick={this.handleDec}>-</button></div>)}handleInc=()=>{appState.increment()}handleDec=()=>{appState.decrement()}}

我们如果事先并不了解mobox的话,看到这个代码心中也会有一定的认知,那就是count是可变的。在mobox中将count封装成为了一个observabal
作为一个被观察的可观察的对象,将其封装成为appState对象,我们不用再去担心数据是如何流动的,它的中间状态是什么,因为它有匪夷所思的高效。

下面结合官网详细的说一下这些代码的意思
使用 MobX 将一个应用变成响应式的可归纳为以下三个步骤:

  1. 定义状态并使其可观察
    可以用任何你喜欢的数据结构来存储状态,如对象、数组、类。 循环数据结构、引用,都没有关系。 只要确保所有会随时间流逝而改变的属性打上 mobx 的标记使它们变得可观察即可。
import {observable} from 'mobx';var appState = observable({timer: 0
});

如上, timer就是可观察的属性

  1. 创建视图以响应状态的变化
    我们的 appState 还没有观察到任何的东西。 你可以创建视图,当 appState 中相关数据发生改变时视图会自动更新。 MobX 会以一种最小限度的方式来更新视图。
    事实上这一点可以节省了你大量的样板文件,并且它有着令人匪夷所思的高效。
  2. 更改状态
    第三件要做的事就是更改状态。 也就是你的应用究竟要做什么。 不像一些其它框架,MobX 不会命令你如何如何去做。 这是最佳实践,但关键要记住一点: MobX
    帮助你以一种简单直观的方式来完成工作。

下面的代码每秒都会修改你的数据,而当需要的时候UI会自动更新。 无论是在改变状态的控制器函数中,还是在应该更新的视图中,都没有明确的关系定义。 使用
observable 来装饰你的状态和视图,这足以让 MobX检测所有关系了。

appState.resetTimer = action(function reset() {appState.timer = 0;
});setInterval(action(function tick() {appState.timer += 1;
}), 1000);

只有在严格模式(默认是不启用)下使用 MobX 时才需要 action 包装。 建议使用 action,因为它将帮助你更好地组织应用,并表达出一个函数修改状态的意图。
同时,它还自动应用事务以获得最佳性能。
MobX 区分了以下几个应用中的概念

  1. State(状态)
    状态 是驱动应用的数据。 通常有像待办事项列表这样的领域特定状态,还有像当前已选元素的视图状态。 记住,状态就像是有数据的excel表格。

  2. Derivations(衍生)
    任何 源自状态并且不会再有任何进一步的相互作用的东西就是衍生。 衍生以多种形式存在:

用户界面
衍生数据,比如剩下的待办事项的数量。
后端集成,比如把变化发送到服务器端。
MobX 区分了两种类型的衍生:

Computed values(计算值) - 它们是永远可以使用纯函数(pure function)从当前可观察状态中衍生出的值。
Reactions(反应) - Reactions 是当状态改变时需要自动发生的副作用。需要有一个桥梁来连接命令式编程(imperative programming)和响应式编程(reactive programming)。
或者说得更明确一些,它们最终都需要实现I / O 操作。
刚开始使用 MobX 时,人们倾向于频繁的使用 reactions。 黄金法则: 如果你想创建一个基于当前状态的值时,请使用 computed。
回到excel表格这个比喻中来,公式是计算值的衍生。但对于用户来说,能看到屏幕给出的反应则需要部分重绘GUI。

  1. Actions(动作)
    动作 是任一一段可以改变状态的代码。用户事件、后端数据推送、预定事件、等等。 动作类似于用户在excel单元格中输入一个新的值。

在 MobX 中可以显式地定义动作,它可以帮你把代码组织的更清晰。 如果是在严格模式下使用 MobX的话,MobX 会强制只有在动作之中才可以修改状态。
原则
MobX 支持单向数据流,也就是动作改变状态,而状态的改变会更新所有受影响的视图。
1037363-20190228140653375-484155461.png
当状态改变时,所有衍生都会进行原子级的自动更新。因此永远不可能观察到中间值。

所有衍生默认都是同步更新。这意味着例如动作可以在改变状态之后直接可以安全地检查计算值。

计算值 是延迟更新的。任何不在使用状态的计算值将不会更新,直到需要它进行副作用(I / O)操作时。 如果视图不再使用,那么它会自动被垃圾回收。

所有的计算值都应该是纯净的。它们不应该用来改变状态。

import {observable, autorun} from 'mobx';var todoStore = observable({/* 一些观察的状态 */todos: [],/* 推导值 */get completedCount() {return this.todos.filter(todo => todo.completed).length;}
});/* 观察状态改变的函数 */
autorun(function() {console.log("Completed %d of %d items",todoStore.completedCount,todoStore.todos.length);
});/* ..以及一些改变状态的动作 */
todoStore.todos[0] = {title: "Take a walk",completed: false
};
// -> 同步打印 'Completed 0 of 1 items'todoStore.todos[0].completed = true;
// -> 同步打印 'Completed 1 of 1 items'

本文整理自:https://cn.mobx.js.org/intro/concepts.html

转载于:https://www.cnblogs.com/smart-girl/p/10450038.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/363658.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

html输入完账号密码才能跳转,HTML输入字段跳转

我有2个文本字段&#xff0c;用户名和密码。当我输入密码时&#xff0c;它跳到第一个。我不知道为什么会这样。我无法找到它为什么跳。如何更改密码表单不跳转&#xff1f;这里是代码&#xff1a;HTML输入字段跳转session_start();require_once database.php;if (isset($_SESSI…

让使用MSN就像访问网页一样容易!

有时候&#xff0c;你不得不佩服微软的想法&#xff01; http://webmessenger.msn.com/转载于:https://www.cnblogs.com/Hush/archive/2004/12/10/75430.html

学用状态机模式,写的报销流程,请指教

刚学编程不久&#xff0c;请前辈们指点。需求变化点&#xff1a;不同的金额&#xff0c;和不同的角色走不同的报销流程usingSystem;staticclassFactory { publicstaticEmployee CreateEmployee(stringname) { Employee employee null; switch(name) …

Java 8 Friday:更好的异常

在Data Geekery &#xff0c;我们喜欢Java。 而且&#xff0c;由于我们真的很喜欢jOOQ的流畅的API和查询DSL &#xff0c;我们对Java 8将为我们的生态系统带来什么感到非常兴奋。 Java 8星期五 每个星期五&#xff0c;我们都会向您展示一些不错的教程风格的Java 8新功能&#…

【留言板】可编辑输入框操作总结

闲暇之余&#xff0c;用于加深自己对基础的了解&#xff0c;徒手撸了一个留言板&#xff1a;输入框。废话少说&#xff0c;进入正题。简陋的效果如下(下载代码)&#xff1a; 一、定义需求 可输入文本&#xff0c;以及插入表情。兼容性&#xff1a;IE与标准浏览器 二、详细设计…

excel poi3.17导出导入

https://blog.csdn.net/phil_jing/article/details/78307819 转载于:https://www.cnblogs.com/lyon91/p/10450668.html

2021年兰州师大附中高考成绩查询,2021年兰州重点高中名单及排名,兰州高中高考成绩排名榜...

”一千个人眼中&#xff0c;就有一千个哈姆雷特“。关于兰州高职学校排名&#xff0c;每个人的观点也是各不相同&#xff0c;今天就给大家分享一下我心中的兰州高中排名及格局分布&#xff0c;主要参考依据是近年中考录取分数线及高考成绩。数据仅供参考&#xff01;希望对你有…

Android 创建,验证和删除桌面快捷方式 (删除快捷方式测试可用)

测试环境为Adnroid 2.1以上。 第一步&#xff1a;AndroidManifest.xml 权限配置&#xff1a; 添加快捷方式权限&#xff1a; <uses-permission android:name"com.android.launcher.permission.INSTALL_SHORTCUT"/> 验证快捷方式是否存在权限&#xff1a; <u…

ASP.NET存储Session的StateServer

由于公司要对服务器做个负载均衡&#xff0c;所以Web项目在两台前端服务器(web1、web2)各部署了一份。但是在项目中会用到session。当一开始在web1上登陆后&#xff0c;由于web1之后负载可能会变大&#xff0c;就有可能从web1跳转到web2上。从网上找了好多资料&#xff0c;自己…

休眠和UUID标识符

介绍 在我以前的文章中&#xff0c;我谈到了UUID代理密钥以及用例 &#xff0c; 这些用例比更常见的自动增量标识符更合适。 UUID数据库类型 有几种方法可以表示128位UUID&#xff0c;并且每当有疑问时&#xff0c;我都希望向Stack Exchange寻求专家建议。 由于通常对表标识符…

use vue vuex vue-router, not use webpack

vue,vuex,vue-router放在一起能做什么&#xff1f;不用webpack之类的打包工具使用他们是否可行&#xff1f;各位道友在初学vue时是否有这样的困惑。因为现代构建前端项目的一般模式是&#xff1a; 安装webapck&#xff0c;某种是glup,grunt&#xff0c;或者是fis等构建工具然后…

html网页加入一个按钮,在html网页设计中,一个“登录”按钮怎么编写代码?

html网页设计&#xff1a;一个简单的登录界面代码&#xff01;在html网页设计中&#xff0c;一个“登录”按钮怎么编写代码&#xff1f;列如所给图片的“登录”按钮怎么用html代码显示出来&#xff0c;要求能够识别是否输入用户名和密码&#xff01;是这样的效果吗&#xff1f;…

blender的汉化方法!

本人对于此只是初步认知阶段&#xff0c;也许对于电脑高手来说&#xff0c;这只是小儿科。但对于我来说&#xff0c;能够摸索出其中的方法&#xff0c;还是费了一些力气&#xff0c;所以&#xff0c;也蛮有成就感。希望拿来与同是处于初学水平的朋友共同学习。 blender这个软件…

SQL重复记录查询(转载)

1、查找表中多余的重复记录&#xff0c;重复记录是根据单个字段&#xff08;peopleId&#xff09;来判断select * from peoplewhere peopleId in (select peopleId from people group by peopleId having count(peopleId) > 1) 例二&#xff1a;select * from testt…

[Linux] 007 目录处理命令

1. 目录处理命令&#xff1a;mkdir 命令名称&#xff1a;mkdir命令英文原意&#xff1a;make directories命令所在路径&#xff1a;/bin/mkdir执行权限&#xff1a;所有用户语法&#xff1a;mkdir -p [目录名]功能描述&#xff1a; 创建新目录-p 递归创建范例&#xff1a; mkdi…

计算机科学与技术专业《计算机网络原理》课程实验指导书,计算机科学导论,课程实验指导书解读.pdf...

计算机科学导论实验指导书聊城大学计算机学院聊城大学计算机学院聊城大学计算机学院聊城大学计算机学院2010 年年 8 月月年年 月月《计算机科学导论》课程实验指导书目 录《计算机科学导论》课程实验教学大纲 1实验一 计算机基本操作 3基本信息 3实验预习 3实验过程 4实验数据和…

Java Singleton设计模式

它是Java中最简单的设计模式之一。 如果有人问我哪种设计模式好&#xff0c;那么我会很自豪地说Singleton。 但是&#xff0c;当他们深入询问单身人士的概念时&#xff0c;我感到很困惑。 真的单身是那么困难吗&#xff1f; 确实不是&#xff0c;但是它有许多我们需要了解的…

elasticsearch配置文件解析

1.Cluster&#xff08;集群&#xff09;# 集群名称标识了你的集群&#xff0c;自动探查会用到它。默认值为elasticsearch# 如果你在同一个网络中运行多个集群&#xff0c;那就要确保你的集群名称是独一无二的。## cluster.name: my-application 2.Node&#xff08;节点&#xf…

刚刚出炉的Asp.net网站部署视频教程

刚刚出炉的Asp.net网站部署视频教程,希望对新手朋友有所帮助主要包括内容&#xff1a; 1、IIS的安装与配置 2、Asp.net环境的安装与常见问题解决 3、Asp.net网站的配置和使用 51aspx会陆续推出基础教程与大家见面&#xff0c;敬请期待&#xff01; 中间不妥之处还希望大家多多包…

添加jQuery方法解析url查询部分

Web前端不同页面间传值可以使用 cookies、localStorage 和 sessionStorage 等本地存储。 但是&#xff0c;今天我们尝试使用 url 查询&#xff0c;假设我们要传递字符串 str 到 modify.html 页面&#xff1a; var str "nameBob Chen&gender男&date1998/04/26&am…