React之MobX使用

2023-12-18 18:32
文章标签 javascript 使用 react frontend mobx

本文主要是介绍React之MobX使用，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

前言

由于最近开启一个新的个人小项目，准备还是使用 React 及其生态来实现整个技术架构，之前一直使用的是 React + React-Router + Redux 组合，虽然说使用 Redux 来管理整个应用的数据流有着优点，但是 Redux 的写法繁琐也确实让人诟病，当然这里并不是说 Redux 不好。
基于项目本身并不大，决定寻找一个新的解决方案，而 MobX 在之前就有所耳闻（只是一直没有时间和需求去深入了解），借着这次机会正好可以好好学习下 MobX 的理念。

本文中强烈建议使用 ES6&ES7 的语法并且本文也只用 ES6&ES7 语法来举例实现。

开始使用

START！！！?

首先第一步当然是引入 MobX，这里很简单，两种方式：

  1. 使用 npm 安装然后引入：
npm install mobx;

import { ... } from 'mobx';
  1. 使用 script 标签引入：
<script src="https://unpkg.com/mobx/lib/mobx.umd.js"></script>

在 MobX 的使用中，使用 ES7 语法的 修饰器（Decorator） 将可以极大的简化组织代码，当然，如果使用 ES5 的语法也未尝不可，但是我这里还是强烈建议大家使用 修饰器，并且本文中的所有例子也都基于修饰器来说明。

对于修饰器这里简要说明一下，修饰器其实是对于一种函数形式的语法糖，通过以下例子可以一目了然其行为作用：

@decorator
class A {}// 等同于
class A {}
A = decorator(A) || A;

配置 ES6 以及 修饰器 ，最方便的当然是使用 babel 来编译 ES6 代码了，在 .babelrc 中配置：

{"presets": ["es2015","stage-1"],"plugins": ["transform-decorators-legacy"]
}

这里使用了 ES6 中 stage-1 提案标准，然后加入 transform-decorators-legacy 来支持修饰器。

核心概念

数据流

在一个数据管理框架&库中，其最重要的就是它的数据管理模式了，也就是其数据流。
对于 MobX 来说，它的数据流简明清晰，并且也是单向数据流，如下图所示。

Mbox 的数据流图片来源：http://cn.mobx.js.org/

它由几个部分组成：Actions、State、Computed Values、Reactions

在整个数据流中，通过事件驱动（UI 事件、网络请求…）触发 Actions，在 Actions 中修改了 State 中的值，这里的 State 既应用中的 store 树（存储数据），然后根据新的 State 中的数据计算出所需要的计算属性（computed values）值，最后响应（react）到 UI 视图层。

当然，如此说明仍然是过于抽象，接下来就进入实际例子分析。

例子

const { observable, action, computed, autorun } = mobx;class Store {@observable list = []@computed get total() {return this.list.length;}@action change () {this.list.push(this.list.length);}
};const mstore = new Store();setInterval(() => {mstore.change();
}, 2000);autorun(() => {console.log(mstore.total);
});

运行这个例子，将可以看到控制台打印出来的数据，我们通过下面几个部分来分析代码。

可观察状态（State）

在上面的例子中，定义了一个 Store 类作为数据存储，通过 @observable 修饰器可以将其中的属性转变为可观察的状态值，其语法为：

@observable  classProperty = value

@observable 接受任何类型的 js 值（原始类型、引用、纯对象、类实例、数组和、maps），observable 的属性值在其变化的时候 mobx 会自动追踪并作出响应。

当 value 是一个对象类型值的时候，它会默认克隆该对象并且把其中每个属性变为可观察的值，这里默认是深拷贝，也就是说其对象的后代属性都会变成可观察的，比如 @observable classProperty = { obj: { name: 'q' } } ，当 classProperty.obj.name 改变的时候，在 MobX 中也是可以观察到并响应的；

当然在这里可以加一些调节器来做一些配置：

  • @observable.deep （默认）对对象进行深拷贝；
  • @observable.shallow 它只对对象进行浅拷贝；
  • @observable.ref 禁用对象的自动转化，只转化其引用；

这里需要注意的是，当定义好其 observable 的对象值后，对象中后来添加的值是不会变为可观察的，这时需要使用 extendObservable 来扩展对象：

const { observable, action, computed, autorun, extendObservable } = mobx;class Store {@observable oo = {name: 1}
};const mstore = new Store();extendObservable(mstore, {oo: {age: 0}
});var i = 1;
setInterval(() => {mstore.oo.age = i++;
}, 2000);autorun(() => {console.log(mstore.oo.age);
});

计算属性值（Computed Values）

计算属性值实际上是一类衍生值，它是根据现有的状态或者其他值计算而来，原则上在计算属性中尽可能地不对当前状态做任何修改；
同时对于任何可以通过现有状态数据得到的值都应该通过计算属性获取。
语法为：@computed get computesValue [function]；

如上面的例子中，只需要获取其 list 属性的总数 total 的时候，我们可以根据其 list 来计算出 total，

class Store {@observable list = []@computed get total() {return this.list.length;}@action change () {this.list.push(this.list.length);}
};autorun(() => {console.log(mstore.total);
});

同时，当状态改变使得计算属性的值发生改变的时候，其也是可观察到的。

在 store 对象中，还可以定义 state 属性的 setter：

class Store {@observable length = 2;@computed get squared() {return this.length * this.length;}set squared(value) {this.length = Math.sqrt(value);}
}

在每次改变 Store.squared 的时候，会先运行 set squared 函数，从而改变 Store 中的 state。

动作（Action）

在 MobX 中，对于 store 对象中可观察的属性值，在他们改变的时候则会触发观察监听的函数，这里注意两点：

  • 该属性必须是定义的可观察属性（@observable）
  • 它的值必须发生改变（和原值是不等的）：
class Store {@observable list = []@observable name = '2'@observable oo = {age: 1}
};const mstore = new Store();// 触发观察监听的函数
mstore.list.push('1');// 或者
mstore.name = 'h';// 或者
mstore.oo.age = 12;// 这个情况下是不会触发观察，因为 age 属性并不可观察
mstore.age = 10;// 这个情况下也不会触发观察，因为其值没有发生变化
mstore.oo.age = 1;

在 MobX 中，其本身并不会对开发者作出任何限制去如何改变可观察对象；
但是，它还是提供了一个可选的方案来组织代码与数据流，@action，其规定对于 store 对象中所有可观察状态属性的改变都应该在 @action 中完成，它使代码可以组织的更好，并且对于数据改变的时机也更加清晰。

语法形式：@action actionFuncName[function]

const { observable, action, computed, autorun } = mobx;class Store {@observable list = []@computed get total() {return this.list.length;}@action change (i) {this.list.push(i);}
};
const mstore = new Store();var i = 0;
autorun(() => {console.log(mstore.total);
});mstore.change(i++);

可以看到，这里将 store 中 list 属性的改变都放在 @action change 函数之中，外加只需要调用该函数即可。

运行观察（autorun）

在上面的例子中，当触发了可观察状态属性的改变后，其变化的监听则是在传入 autorun 函数中作出响应。

autorun 接受一个函数作为参数，在使用 autorun 的时候，该函数会被立即调用一次，之后当该函数中依赖的可观察状态属性（或者计算属性）发生变化的时候，该函数会被调用，注意，该函数的调用取决的函数中使用了哪些可观察状态属性（或者计算属性）。

例子 1：

const { observable, action, computed, autorun } = mobx;class Store {@observable count = 0;@action add () {this.count = this.count + 1;}
};const mstore = new Store();setInterval(() => {mstore.add();
}, 2000);autorun(() => {console.log(mstore.count);
});

在该例子中，autorun 的函数依赖了 mstore.count 属性，该属性是可观察的，其每次变化都会加 1 ，因此其中的函数在第一次立即触发，之后每次改变 mstore.count 的值都会被触发；

例子 2：

const { observable, action, computed, autorun } = mobx;class Store {@observable count = 0;@computed get result() {return this.count + 100;}@action add () {this.count = this.count + 1;}
};const mstore = new Store();setInterval(() => {mstore.add();
}, 2000);autorun(() => {console.log(mstore.result);
});

该例子中和 例子1 是类似的，auto 中的函数依赖了计算属性 mstore.result ，其每次变化的时候也都会触发该函数；

例子 3:

const { observable, action, computed, autorun } = mobx;class Store {@observable count = 0;@computed get result() {return this.count + 100;}@action add () {this.count = this.count;}
};const mstore = new Store();setInterval(() => {mstore.add();
}, 2000);autorun(() => {console.log(mstore.result);
});

在该例子中，只在使用 autorun 的时候触发了一次其传入的函数，之后即使调用 mstore.add() 也并未观察到，这是因为之后的调用中 mstore.result 并没有改变，所以不会触发观察；

例子 4:

const { observable, action, computed, autorun } = mobx;class Store {count = 0;@action add () {this.count = this.count;}
};const mstore = new Store();setInterval(() => {mstore.add();
}, 2000);autorun(() => {console.log(mstore.count);
});

在该例子中也只是在使用 autorun 的时候调用了一次其传入的函数，之后 mstore.count 的值即使改变也并没有触发观察，这是因为 mstore.count 并不是可观察的。

在实际使用中，autorun 中的函数就是用来操作 Reactions 的，当可观察状态属性的值发生改变的时候，可以在该函数中利用状态值来更新改变 UI 视图（记录日志、持久化），在 MobX 结合 React 的使用中，mobx-react 库则是封装了 autorun 用来在 store 中的可观察状态属性值发生改变的时候 rerender React 组件。

异步行为

在很多时候，比如网络请求 ，其 Actions 行为是异步的，这里通过以下一个例子说明如何编写异步的 Action：

import { observable, action } from "mobx";
import axios from "axios";export default class Store {@observable authenticated;@observable authenticating;@observable items;@observable item;@observable testval;// 初始化 stateconstructor() {this.authenticated = false;this.authenticating = false;this.items = [];this.item = {};this.testval = "Hello";}async fetchData(pathname, id) {let { data } = await axios.get(`localhost:3000/${pathname}`);data.length > 0 ? this.setData(data) : this.setSingle(data);}@action setData(data) {this.items = data;}@action setSingle(data) {this.item = data;}@action clearItems() {this.items = [];this.item = {};}@action authenticate() {return new Promise((resolve, reject) => {this.authenticating = true;setTimeout(action(() => {this.authenticated = !this.authenticated;this.authenticating = false;resolve(this.authenticated);}), 100);});}
}

在 React 中使用 MobX

在 React 中使用 MobX 需要用到 mobx-react。
其提供了 Provider 组件用来包裹最外层组件节点，并且传入 store（通过）context 传递给后代组件：

import { Provider } from 'mobx-react';
const stores = {...
};ReactDOM.render((<Provider {...stores}><App /></Provider>
), document.getElementById('root'));

使用 @inject 给组件注入其需要的 store（利用 React context 机制）；
通过 @observer 将 React 组件转化成响应式组件，它用 mobx.autorun 包装了组件的 render 函数以确保任何组件渲染中使用的数据变化时都可以强制刷新组件：

import React from 'react';
import { inject, observer } from 'mobx-react';@inject('userStore', 'commonStore')
@observer
export default class App extends React.Component {componentWillMount() {if (this.props.commonStore.token) {this.props.userStore.pullUser().finally(() => this.props.commonStore.setAppLoaded());} else {this.props.commonStore.setAppLoaded();}}render() {if (this.props.commonStore.appLoaded) {return (<div>...{this.props.children}</div>);}return (...);}
}

TIP

useStrict

在 mobx 中，可以有很多种方式去修改 state，mobx 并不对其做限制；
但是如果使用了严格模式：

import { useStrict } from 'mobx';useStrict(true);

那么将会限制开发者只能通过 @action 来修改 state，这将会更有利于组织代码以及使数据流更清晰。

总结

MobX 的理念是通过观察者模式对数据做出追踪处理，在对可观察属性的作出变更或者引用的时候，触发其依赖的监听函数，在 React 中既是在 @observer 中对组件进行数据更新并渲染到视图层面，其核心与开发模式和 Vue 非常相似。

相比于 Redux 纯函数的形式，它在代码层面却是给开发者减少了不少工作量，但在多人维护的大项目中，个人认为还是 Redux 更加有利，一旦项目中的数据交互增多，其在 MobX 中对于数据流的变化就变得难以理清，而只能依靠约定来限制触发场景。

在 Redux 于 MobX 的选择中，其两者还是各具优势同时也各有缺点，而如何进行抉择还应该结合项目需求与业务场景。

参考

  • http://mobx.js.org/
  • http://cn.mobx.js.org/
  • https://github.com/mhaagens/react-mobx-react-router4-boilerplate

转载请注明来源：https://qiutc.me/post/efficient-mobx.html

这篇关于React之MobX使用的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/509377。

相关文章

使用Python和OpenCV库实现实时颜色识别系统

使用Python和OpenCV库实现实时颜色识别系统

《使用Python和OpenCV库实现实时颜色识别系统》：本文主要介绍使用Python和OpenCV库实现的实时颜色识别系统,这个系统能够通过摄像头捕捉视频流,并在视频中指定区域内识别主要颜色（红... 目录一、引言二、系统概述三、代码解析1. 导入库2. 颜色识别函数3. 主程序循环四、HSV色彩空间详解
阅读更多...
Windows下C++使用SQLitede的操作过程

Windows下C++使用SQLitede的操作过程

《Windows下C++使用SQLitede的操作过程》本文介绍了Windows下C++使用SQLite的安装配置、CppSQLite库封装优势、核心功能（如数据库连接、事务管理）、跨平台支持及性能优... 目录Windows下C++使用SQLite1、安装2、代码示例CppSQLite：C++轻松操作SQ
阅读更多...
Python常用命令提示符使用方法详解

Python常用命令提示符使用方法详解

《Python常用命令提示符使用方法详解》在学习python的过程中,我们需要用到命令提示符(CMD)进行环境的配置,：本文主要介绍Python常用命令提示符使用方法的相关资料,文中通过代码介绍的... 目录一、python环境基础命令【Windows】1、检查Python是否安装2、 查看Python的安
阅读更多...
全面解析HTML5中Checkbox标签

全面解析HTML5中Checkbox标签

《全面解析HTML5中Checkbox标签》Checkbox是HTML5中非常重要的表单元素之一，通过合理使用其属性和样式自定义方法，可以为用户提供丰富多样的交互体验，这篇文章给大家介绍HTML5中C... 在html5中，Checkbox（复选框）是一种常用的表单元素，允许用户在一组选项中选择多个项目。本
阅读更多...
HTML5 搜索框Search Box详解

HTML5 搜索框Search Box详解

《HTML5搜索框SearchBox详解》HTML5的搜索框是一个强大的工具，能够有效提升用户体验,通过结合自动补全功能和适当的样式，可以创建出既美观又实用的搜索界面,这篇文章给大家介绍HTML5... html5 搜索框（Search Box）详解搜索框是一个用于输入查询内容的控件，通常用于网站或应用程
阅读更多...
Python并行处理实战之如何使用ProcessPoolExecutor加速计算

Python并行处理实战之如何使用ProcessPoolExecutor加速计算

《Python并行处理实战之如何使用ProcessPoolExecutor加速计算》Python提供了多种并行处理的方式,其中concurrent.futures模块的ProcessPoolExecu... 目录简介完整代码示例代码解释1. 导入必要的模块2. 定义处理函数3. 主函数4. 生成数字列表5.
阅读更多...
Python中help()和dir()函数的使用

Python中help()和dir()函数的使用

《Python中help()和dir()函数的使用》我们经常需要查看某个对象（如模块、类、函数等）的属性和方法,Python提供了两个内置函数help()和dir(),它们可以帮助我们快速了解代... 目录1. 引言2. help() 函数2.1 作用2.2 使用方法2.3 示例(1) 查看内置函数的帮助(
阅读更多...
Linux脚本(shell)的使用方式

Linux脚本(shell)的使用方式

《Linux脚本(shell)的使用方式》：本文主要介绍Linux脚本(shell)的使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录概述语法详解数学运算表达式Shell变量变量分类环境变量Shell内部变量自定义变量：定义、赋值自定义变量：引用、修改、删
阅读更多...
Java使用HttpClient实现图片下载与本地保存功能

Java使用HttpClient实现图片下载与本地保存功能

《Java使用HttpClient实现图片下载与本地保存功能》在当今数字化时代,网络资源的获取与处理已成为软件开发中的常见需求,其中,图片作为网络上最常见的资源之一,其下载与保存功能在许多应用场景中都... 目录引言一、Apache HttpClient简介二、技术栈与环境准备三、实现图片下载与保存功能1.
阅读更多...
Python中使用uv创建环境及原理举例详解

Python中使用uv创建环境及原理举例详解

《Python中使用uv创建环境及原理举例详解》uv是Astral团队开发的高性能Python工具,整合包管理、虚拟环境、Python版本控制等功能,：本文主要介绍Python中使用uv创建环境及... 目录一、uv工具简介核心特点：二、安装uv1. 通过pip安装2. 通过脚本安装验证安装：配置镜像源（可
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2