Mobx和Mobx-react:集中式状态管理

一、Mobx

(1) Mobx是一个功能强大，上手非常容易的状态管理工具。
(2) Mobx背后的哲学很简单: 任何源自应用状态的东西都应该自动地获得。只获取与自己相关的数据，不获取无关数据（redux则相反）
(3) Mobx利用getter和setter来收集组件的数据依赖关系，从而在数据发生变化的时
候精确知道哪些组件需要重绘，在界面的规模变大的时候，往往会有很多细粒度更新,提升性能.
二、Mobx与redux

Mobx写法上更偏向于OOP（面向对象）。
对一份数据直接进行修改操作，不需要始终返回一个新的数据。
并非单一store,可以多store。
Redux默认以JavaScript原生对象形式存储数据，而Mobx使用可观察对象

三、mobx安装：npm install mobx@6

四、mobx使用

1.普通数据类型和复杂数据类型使用案例

不加装饰器的话只能处理同步，处理不了异步


import React, { Component } from 'react';
//observable:转换为可观察对象
//autorun:监听
import  { observable,autorun } from 'mobx';//普通类型数据的监听
var observableNumber=observable.box(99);
var observableName=observable.box("66球");//第一次加载时执行，之后每次更新都会执行
//autorun更新到才会执行
autorun(()=>{console.log(observableNumber.get());
})
autorun(()=>{console.log(observableName.get());
})setTimeout(() => {observableNumber.set(100)
}, 2000);
setTimeout(() => {observableName.set("溜溜球")
}, 1000);//对象
var obj=observable.map({name:"刘德华",age:18
});
autorun(()=>{console.log(obj.get('name'));
})
setTimeout(() => {obj.set('name','华仔')
}, 3000);
setTimeout(() => {obj.set('age',19)
}, 4000);class App extends Component {render() {return (<div>App</div>);}
}export default App;

2.es7装饰器语法应用-可以处理异步

①.让vscode编辑器支持es7装饰器语法

点击文件-首选项-搜索experimentaPecorators-勾选

②.让react支持es7装饰器语法

安装：npm i @babel/core @babel/plugin-proposal-decorators @babel/preset-env

创建 .babelrc文件

{"presets": ["@babel/preset-env"],"plugins": [["@babel/plugin-proposal-decorators",{"legacy": true}]]
}

创建config-overrides.js

const path = require('path')
const { override, addDecoratorsLegacy } = require('customize-cra')
function resolve(dir) {return path.join(__dirname, dir)
}
const customize = () => (config, env) => {config.resolve.alias['@'] = resolve('src')if (env === 'production') {config.externals = {'react': 'React','react-dom': 'ReactDOM'}}return config
};
module.exports = override(addDecoratorsLegacy(), customize())

安装依赖

npm i customize-cra react-app-rewired

修改package.json

"scripts": {"start": "react-app-rewired start","build": "react-app-rewired build","test": "react-app-rewired test","eject": "react-app-rewired eject"
},

注意：改完配置文件之后要重启服务器： npm start

3.案例

①.store.js

runInAction :解决异步问题


// observable:转换为可观察对象
// autorun:监听
//runInAction:处理异步
import {observable, configure, action,runInAction} from 'mobx';
import axios from 'axios';
// 严格模式， 必须写action,
// 如果是never，可以不写action,
// 最好设置always, 防止任意地方修改值， 降低不确定性。
configure({enforceActions: "always"})class Store{@observable isTabbarShow=true;@observable list=[];@observable cityName="深圳";@action changeShow(){this.isTabbarShow = true}@action changeHide(){this.isTabbarShow = false}//异步@action getCinemaList(){axios({url:"https://m.maizuo.com/gateway?cityId=110100&ticketFlag=1&k=7406159",method:"get",headers:{'X-Client-Info': '{"a":"3000","ch":"1002","v":"5.0.4","e":"16395416565231270166529","bc":"110100"}','X-Host': 'mall.film-ticket.cinema.list'}}).then(res=>{// runInAction 解决异步问题runInAction(()=>{this.list=res.data.data.cinemas})})}}
export default new Store();

②.isTabbarShow应用

app.js中显示isTabbarShow


import React, { Component } from 'react';
import Mrouter from "./router/indexRouter";
import Tabbar from "./component/Tabbar";
import "./App.css";
import {autorun} from "mobx";
import store from "./mobx/store";export default class App extends Component {state={isShow:false}componentDidMount() {autorun(()=>{console.log(store.isTabbarShow);this.setState({isShow:store.isTabbarShow})})}render() {return (<div><Mrouter>{this.state.isShow && <Tabbar></Tabbar>}</Mrouter></div>)}
}

组件中调用方法changeShow和changeHide控制isTabbarShow

import React,{useEffect} from 'react';
import store from '../mobx/store';export default function Detail(props) {useEffect(() => {console.log("create创建");store.changeHide()return () => {store.changeShow()console.log("cleanup销毁");};}, []);return (<div>Detail</div>)
}

③.应用

unsubscribe()：自定义方法取消订阅，需要手动取消订阅


import React, { useState, useEffect } from "react";
import store from "../mobx/store";
import {autorun} from 'mobx';export default function Cinemas(props) {const [cinemaList, setcinemaList] = useState([]);useEffect(() => {if(store.list.length === 0){store.getCinemaList()}var unsubscribe=autorun(()=>{console.log(store.list);setcinemaList(store.list)})return () => {//取消订阅unsubscribe()};}, []);return (<div><div>{cinemaList.map((item) => (<dl key={item.cinemaId} style={{padding:"10px"}}><dt>{item.name}</dt><dd style={{fontSize:'12px',color:"gray"}}>{item.address}</dd></dl>))}</div>cinemaList</div>);
}

五、mobx-react

1.安装：npm install mobx-react@7

（1）react 组件里使用 @observer
observer 函数/装饰器可以用来将 React 组件转变成响应式组件。
(2) 可观察的局部组件状态
@observable 装饰器在React组件上引入可观察属性。而不需要通过 React 的冗长和强制性的 setState 机制来管理。

（3）Provider 组件
它使用了 React 的上下文(context)机制，可以用来向下传递 stores。要连接到这些 stores，需要传递一个 stores名称的列表给 inject，这使得 stores 可以作为组件的 props 使用。this.props

2.案例

①.store.js


// observable:转换为可观察对象
// autorun:监听
//runInAction:处理异步
import {observable, configure, action,runInAction} from 'mobx';
import axios from 'axios';
// 严格模式， 必须写action,
// 如果是never，可以不写action,
// 最好设置always, 防止任意地方修改值， 降低不确定性。
configure({enforceActions: "always"})class Store{@observable isTabbarShow=true;@observable list=[];@observable cityName="深圳";@action changeShow(){this.isTabbarShow = true}@action changeHide(){this.isTabbarShow = false}//异步@action getCinemaList(){axios({url:"https://m.maizuo.com/gateway?cityId=110100&ticketFlag=1&k=7406159",method:"get",headers:{'X-Client-Info': '{"a":"3000","ch":"1002","v":"5.0.4","e":"16395416565231270166529","bc":"110100"}','X-Host': 'mall.film-ticket.cinema.list'}}).then(res=>{// runInAction 解决异步问题runInAction(()=>{this.list=res.data.data.cinemas})})}}
export default new Store();

②.主入口文件index.js

import App from "./10-mobx/04-router/App";
import {Provider} from "mobx-react";
import store from "./10-mobx/04-router/mobx/store";const root = ReactDOM.createRoot(document.querySelector('#root'));
root.render( <div className="box"><Provider store={store}><App/></Provider></div>);

③.app.js


import React, { Component } from 'react';
import Mrouter from "./router/indexRouter";
import Tabbar from "./component/Tabbar";
import "./App.css";
import {observer,inject} from "mobx-react";//mobx-react利用高阶组件构建一个父组件
@inject("store")//注入store
@observer
export default class App extends Component {componentDidMount() {console.log(this.props.store);//所有store值}render() {return (<div><Mrouter>{this.props.store.isTabbarShow && <Tabbar></Tabbar>}</Mrouter></div>)}
}

④.子页面 .此组件是函数式组件，不用装饰器的写法，用标签的写法<Observer></Observer>，无状态，无需设置取消订阅，会自动取消订阅


import React, { useState, useEffect } from "react";
import store from "../mobx/store";
import {autorun} from 'mobx';
import {Observer} from 'mobx-react';export default function Cinemas(props) {useEffect(() => {if(store.list.length === 0){store.getCinemaList()}return () => {//取消订阅};}, []);return (<div><Observer>{()=>{return <div>{store.list.map((item) => (<dl key={item.cinemaId} style={{padding:"10px"}}><dt>{item.name}</dt><dd style={{fontSize:'12px',color:"gray"}}>{item.address}</dd></dl>))}</div>}}</Observer>cinemaList</div>);
}

Mobx和Mobx-react:集中式状态管理相关推荐

reactjs redux集中式状态管理最简入门案例
reactjs redux集中式状态管理最简入门案例
react中数据状态管理的四种方案
我们为什么需要状态管理? (1) 一个是为了解决相邻组件的通信问题. 虽然可以通过「状态提升」解决,但有两个问题: 每次子组件更新,都会触发负责下发状态的父组件的整体更新(使用 Context 也有这 ...
5 个最值得注意的开源集中式日志管理工具
集中式日志记录与安全性一样,是 IT 基础结构(包括 Web 应用程序和硬件设备)中核心资源监控和健全管理的一个基本方面.有能力的运维团队能够搭建一个日志监控和管理系统,来应对系统故障或应用程序的怪异 ...
HDFS集中式缓存管理（Centralized Cache Management）
Hadoop从2.3.0版本号開始支持HDFS缓存机制,HDFS同意用户将一部分文件夹或文件缓存在HDFS其中.NameNode会通知拥有相应块的DataNodes将其缓存在DataNode的内存其中 ...
集中式日志管理各种方案对比
集中式日志管理各种方案对比 RSYSLOG 优点系统自带,不需要安装扩展. 缺点文档很不清晰,配置很不方便 PAPERTRAILS 优点 PT 就是这么一个工具.通过它你可以从一个窗口轻松的查找多 ...
使用集中式身份管理服务详解
系统需要使用集中式身份管理服务,首先要在局域网内创建集中身份管理服务器(如LDAP,NIS) 集中式身份管理系统至少需要两项服务: 1 账户信息,常用的解决方案包括LDAP(轻量级目录访问协议,用于A ...
React中的状态管理---Mobx
Mobx的介绍 Mobx是一个功能强大,上手非常容易的状态管理工具.redux的作者也曾经向大家推荐过它,在不少情况下可以使用Mobx来替代掉redux. Mobx流程图 Mobx使用流程创建项目 ...
react - redux 全局状态管理、多组件共享状态 - 例子有详细注释
react全局状态管理基本概念下面开始小例子需要用到的插件redux 代码 - 代码中有详细的注释参考阮一峰的网络日志先来看一下Redux的流程图基本概念 Store: 保存数据的地方, ...
vue总结 08状态管理vuex
状态管理类 Flux 状态管理的官方实现由于状态零散地分布在许多组件和组件之间的交互中,大型应用复杂度也经常逐渐增长.为了解决这个问题,Vue 提供 vuex:我们有受到 Elm 启发的状态管理库 ...

Mobx和Mobx-react:集中式状态管理

Mobx和Mobx-react:集中式状态管理相关推荐

最新文章

热门文章