MobX 学习
资源汇集帖:
https://github.com/mobxjs/awesome-mobx/blob/master/README-CN.md
中文文档: http://cn.mobx.js.org/
Store 如何引入?
https://github.com/mobxjs/mobx/issues/300
有3种方法:
- 通过 props 传递
- 直接 import
- 通过 context / Provider 机制传
可根据可测试性、使用方便性自己选择。
如何和 react-router 一起用?
http://frontendinsights.com/connect-mobx-react-router/
表单
mobx-react-form
主要特点:
- 支持3种 validation 模式
- VJF: 传统 js function 校验
- DVR: 声明式校验规则
- SVK: JSON schema 校验关键字
- 可以混合几种模式,还可异步验证。
- form 是个独立的对象,跟组件如何呈现无关。
- 使用时,每个字段通过绑定的语法关联到表单的 field. 按照字段名字匹配。
另一个例子,不用库,直接实现表单双向绑定 https://blog.risingstack.com/handling-react-forms-with-mobx-observables/
其他一些经验文章
- https://github.com/ckinmind/mobx-share
- 使用mobx开发高性能react应用
- https://medium.com/@foxhound87/state-management-hydration-with-mobx-we-must-react-ep-05-1922a72453c6
MobX 学习的更多相关文章
- mobx学习笔记01——什么是mobx?
mobx是什么? js框架 官方定义:Simple,scalable state management(简单.可扩展的状态管理) mobx与redux相比: 语义丰富.响应式编程,开发难度低.学习成本 ...
- mobx 学习笔记
Mobx 笔记 Mobx 三板斧,observable.observer.action. observable: 通过 observable(state) 定义组件的状态,包装后的状态是一个可观察数据 ...
- mobx学习笔记04——mobx常用api
1 可观察的数据(observable) observable是一种让数据的变化可以被观察的方法. 那些数据可被观察? -原始类型 String.Number.Boolean.Symbol -对象 - ...
- mobx学习笔记03——mobx基础语法(decorator修饰器)
在声明阶段实现类与类成员注解的一种语法. function log(target){ const desc = Object.getOwnPropertyDescriotors(target.prot ...
- mobx学习笔记02——mobx基础语法(class)
新的语法可能不被浏览器支持,可以使用babel转换为浏览器支持的代码格式: 为什么要定义class? js是一门面向对象的编程语言.需要利用类来复用代码,提高编程效率. 需要什么样的class能力? ...
- React Native使用Mobx总结
参考博客: http://www.jianshu.com/p/505d9d9fe36a 这是我看的学习Mobx目前为止觉得最详细学习的博客了. 下面只是记录下我的学习和一些简单的使用: 需要引入 ...
- 学习一些和redux一样作用的mobx知识
两个组件:mobx和mobx-react 英文文档:https://mobx.js.org/refguide/object.html 中文文档:https://cn.mobx.js.org/ 样例:h ...
- AntDesign(React)学习-11 使用mobx
mobx 是由 Mendix.Coinbase.Facebook 开源和众多个人赞助商所赞助的. mobx和redux类似,也可以用来进行状态管理,并且更简单,更灵活.初次研究,先实现一个最简单的功能 ...
- mobx 的学习
1.初始化项目 第一步用create-react-app初始化一个项目,并打开webpack配置项 npx create-react-app react-mobx-demo cd react-mobx ...
随机推荐
- python模块的使用
这位老师的文章说的很清楚:模块 这里我只说一下,我在使用过程中的一些注意事项. 比如,我创建了一个包,该包下面有两个模块:model1和model2,如下图 那么我们再python中怎样去使用自己创建 ...
- Mac appStore下载软件报500错误的解决方法
Step1.打开"启动台": Step2:打开"其他": Step3:打开"终端": Step4:复制如下代码,主要不要作任何更改,不要有多 ...
- Vue 旅游网首页开发2 - 首页编写
Vue 旅游网首页开发2 - 首页编写 项目结构 首页开发 效果图 项目开发组件化 将页面的各个部分划分成不同的组件,有助于项目的开发和维护. 项目代码初始化 项目结构修改 1.删除整个 compin ...
- OpenCV自带dnn的Example研究(1)— classification
这个博客系列,简单来说,今天我们就是要研究 https://docs.opencv.org/master/examples.html下的 6个文件,看看在最新的OpenCV中,它们是如何发挥作用的. ...
- Java基础学习-关键字的概述和特点以及常量的概述和分类
1.关键字概述 -被Java语言赋予特定含义的单词 2.关键字的特点 -组成关键字的字母全部小写 -常用的代码编辑器,针对关键字有特殊的颜色标记,非常直观,所以我们不需要死记硬 ...
- flutter测试页
import 'package:flutter/material.dart'; // 应用页面使用有状态Widget class AppScene extends StatefulWidget { @ ...
- 基于Ocelot的gRpcHttp网关
什么是gRpcHttp网关 通俗的讲就是将gRpc提供的服务以rest api的形式提供出去,不需要再单独的写一个webapi去做这件事. gRpcHttp网关好处 减少不必要代码,减少中间层提高通讯 ...
- react项目中实现悬浮(hover)在按钮上时在旁边显示提示
<i className={classNames({ 'device-icon': true, 'camera-icon': true, 'camera-icon-hover-show-intr ...
- loadrunner中使用web_custom_request函数调用webservice接口
1.使用的接口地址: http://www.webxml.com.cn/WebServices/WeatherWebService.asmx?op=getWeatherbyCityName 以SOAP ...
- 2018-2019-2 20175317 实验一《Java开发环境的熟悉》实验报告
实验一<Java开发环境的熟悉> 一.实验内容及步骤 实验内容: (一)实验一Java开发环境的熟悉-1 参考实验要求 建立"自己学号exp1"的目录 在"自 ...