mobx在react的使用
创建项目第六步 mobx
1、安装
yarn add mobx
yarn add mobx-react
2、新建/src/store/store.js
import {observable, computed, action, autorun,runInAction} from 'mobx';
// import {observable, computed, action} from 'mobx';
class Store {
@observable tradeCfg = {
'sadf':'sadf'
};
@observable baseInfo = {};
@observable callback = null;
@observable token = [
{
"id":1,
"name":"YD"
},
{
"id":2,
"name":"ETH"
}
];
}
export default Store;
Router.js 新增加如下代码
import { Provider } from 'mobx-react';
import { observable, useStrict ,autorun} from 'mobx';
import App from './App.js';
import firstStore from './store/first';
// const cnstore = new cnStore();
const stores = {
first: new firstStore(),
// ...other stores
};
<Provider {...stores}>
<App/>
</Provider>
完整代码如下:
import React from 'react';
import { BrowserRouter, HashRouter, Route, Link, Switch } from 'react-router-dom';
import { Provider } from 'mobx-react';
import { observable, useStrict ,autorun} from 'mobx';
import App from './App.js';
import firstStore from './store/store';
// const cnstore = new cnStore();
const stores = {
first: new firstStore(),
// ...other stores
};
const Router = () => (
<BrowserRouter>
<Provider {...stores}>
<App/>
</Provider>
</BrowserRouter>
)
export default Router;
mobx 报错
SyntaxError: /Users/hello/workspace/fe.youdeal.io/app/my-app/src/store/otc.js: Support for the experimental syntax 'decorators-legacy' isn't currently enabled (3:5):
1 | import {observable, computed, action} from 'mobx';
2 | class Store {
> 3 | @observable tradeCfg = {
| ^
4 | 'sadf':'sadf'
5 | };
6 | @observable baseInfo = {};
以上问题 需安装
yarn add @babel/plugin-proposal-decorators
yarn add @babel/plugin-proposal-class-properties
需添加代码 package.json
"presets": [
["react-app"],
["@babel/preset-react"]
],
"plugins": [
["@babel/plugin-proposal-decorators", {"legacy": true }],
["@babel/plugin-proposal-class-properties", { "loose" : true }]
]
event 页面调整
import React , { Component } from 'react';
import { withRouter,NavLink,Switch,Redirect,Route} from 'react-router-dom';
import {observer,inject} from 'mobx-react';
// 导入需要的模块
@withRouter
@inject('first')
@observer
class View extends Component {
render(){
console.log(this.props.first)
return (
<React.Fragment>
<div className="mian">这是event面</div>
<NavLink to="/">首页</NavLink><br/>
<NavLink to="/input">表单</NavLink><br/>
<NavLink to="/event">事件</NavLink>
</React.Fragment>
)
}
}
export default View;
常见问题
MobX 是框架吗?
MobX 不是一个框架。它不会告诉你如何去组织你的代码,在哪存储状态或者如何处理事件。然而,它可能将你从以性能的名义对你的代码提出各种限制的框架中解放出来。
MobX
简单、可扩展的状态管理
MobX 是一个经过战火洗礼的库,它通过透明的函数响应式编程(transparently applying functional reactive programming – TFRP)使得状态管理变得简单和可扩展。MobX背后的哲学很简单:
任何源自应用状态的东西都应该自动地获得。
其中包括UI、数据序列化、服务器通讯,等等。
为什么使用Mobx
React 和 MobX 是一对强力组合。React 通过提供机制把应用状态转换为可渲染组件树并对其进行渲染。而MobX提供机制来存储和更新应用状态供 React 使用。
一些简单的api介绍
1:状态state
组件中的数据。
2:被观察observable
被observable修饰的state数据将会暴露给整个app,各观察者组件都可以根据state值的变化作出响应。
3:观察者observer
被observer修饰的组件,将会根据组件内使用到的被observable修饰的state的变化而自动重新渲染(原理:用autorun包裹了render函数,state变化触发autorun从而自动渲染)
4:action
state值的修改需要在action函数中进行。
5:衍生值computed
get:基于state值,通过一些计算得到的新值并返回给调用者。
set:get的相反运算,参数为一个值,由该值进行get函数中的反运算,得到对应的state值并赋予state。
6:衍生行为autorun
基于state的变化而触发的一系列行为(注意:这些行为不改变state值、不产生新的数据),通常为日志记录、请求发送、UI渲染等。
import { Provider } from ‘mobx-react’;
mobx-react中Provider和inject通过context将store注入并使得任何层级的子组件可以访问到store。
在根组件通过Provider组件注入它
import { withRouter,NavLink,Switch,Redirect,Route} from ‘react-router-dom’;
import {observer,inject} from ‘mobx-react’;
// 导入需要的模块
@withRouter
@inject(‘first’)
@observer
@inject(‘first’)
在子组件中通过inject获取store
@observer
可以把你的(无状态函数)组件变成响应式组件,方法是在组件上添加 observer 函数/ 装饰器.
@withRouter
1.目的就是让被修饰的组件可以从属性中获取history,location,match
路由组件可以直接获取这些属性,而非路由组件就必须通过withRouter修饰后才能获取这些属性了
2.withRouter是专门用来处理数据更新问题的。
在使用一些redux的的connect()或者mobx的inject()的组件中,如果依赖于路由的更新要重新渲染,会出现路由更新了但是组件没有重新渲染的情况。这是因为redux和mobx的这些连接方法会修改组件的shouldComponentUpdate。
注意
constructor(){
makeObservable(this)
}
更新数据
mobx在react的使用的更多相关文章
- 十分钟介绍mobx与react
原文地址:https://mobxjs.github.io/mobx/getting-started.html 写在前面:本人英语水平有限,主要是写给自己看的,若有哪位同学看到了有问题的地方,请为我指 ...
- [React + Mobx] Mobx and React intro: syncing the UI with the app state using observable and observer
Applications are driven by state. Many things, like the user interface, should always be consistent ...
- react mobx webpack 使用案例
1.package.json: { "name": "wtest", "version": "1.0.0", " ...
- mobx.js 使用教程-react
1.store: import { observer } from "mobx-react"; import { observable, action, computed ,aut ...
- 从零配置webpack(react+less+typescript+mobx)
本文目标 从零搭建出一套支持react+less+typescript+mobx的webpack配置 最简化webpack配置 首页要初始化yarn和安装webpack的依赖 yarn init -y ...
- 前端003/【React + Mobx + NornJ】开发模式
1.React + Mobx + NornJ 开发模式快速上手教程 github网址:https://github.com/joe-sky/nornj-cli/blob/master/docs/gui ...
- React MobX 开始
MobX 用于状态管理,简单高效.本文将于 React 上介绍如何开始,包括了: 了解 MobX 概念 从零准备 React 应用 MobX React.FC 写法 MobX React.Compon ...
- Vue.js 2.0 和 React、Augular等其他框架的全方位对比
引言 这个页面无疑是最难编写的,但也是非常重要的.或许你遇到了一些问题并且先前用其他的框架解决了.来这里的目的是看看Vue是否有更好的解决方案.那么你就来对了. 客观来说,作为核心团队成员,显然我们会 ...
- mobx源码解读2
我们将上节用到的几个类的构造器列举一下吧: function Reaction(name, onInvalidate) { if (name === void 0) { name = "Re ...
随机推荐
- Codeforces 840C - On the Bench(dp/容斥原理)
Codeforces 题目传送门 & 洛谷题目传送门 这是一道 *2500 的 D1C,可个人认为难度堪比某些 *2700 *2800. 不过嘛,*2500 终究还是 *2500,还是被我自己 ...
- 使用BRAKER2进行基因组注释
来自:https://www.jianshu.com/p/e6a5e1f85dda 使用BRAKER2进行基因组注释 BRAKER2是一个基因组注释流程,能够组合GeneMark,AUGUSTUS和转 ...
- Python中pymysql基本使用
Python中pymysql模块通过获取mysql数据库命令行游标执行数据库命令来进行数据库操作 优点:操作数据库语句所见即所得,执行了什么数据库语句都很清楚 缺点:操作繁琐,代码量多 1. pymy ...
- CentOS6安装Zabbix(RPM包)
1. 系统环境状态 2. 安装zabbix4.0 3. 安装mysql+apache+php环境 4.配置mysql 5.配置zabbix-server 6. 配置apache 7. web安装 1 ...
- 工作学习1-tcp自连接
运维同事反馈服务起不来.下面为了方便,写了一个demo来展示. https://gitee.com/northeast_coder/code/tree/master/case/case1_tcp_se ...
- c++基础知识03
1.嵌套循环案例--九九乘法表 int main() { //利用嵌套循环乘法口诀表 for (int n = 1; n <= 9; n++) { for (int m = 1; m <= ...
- CAD简介
Computer-aided design (CAD) is the use of computers (or workstations) to aid in the creation, modifi ...
- Redis6 新特性
Redis6新特性 ACL安全策略 ACL(access control list): 访问控制列表,可以设置多个用户,并且给每个用户单独设置命令权限和数据权限 default用户和使用require ...
- Qt——error之undefined reference to `vtable for classname
可能原因:自定义类中使用自定义槽和信号,但是没有在类中增加Q_OBJECT, 解决办法:在类中增加Q_OBJECT,删除编译产生的文件进行重新编译 具体原因分析如下 博主原文
- 容器之分类与各种测试(四)——map
map和set的区别在于,前者key和value是分开的,前者的key不会重复,value可以重复:后者的key即为value,后者的value不允许重复.还有,map在插入时可以使用 [ ]进行(看 ...