Mobx
Mobx是一个功能强大，上手非常容易的状态管理工具。
redux的作者也曾经向大家推荐过它，在不少情况下可以使用Mobx来替代掉redux。
官网有明确的核心概念使用方法，并配有egghead的视频教程。这里就不一一赘述了。
要特别注意当使用 mobx-react 时可以定义一个新的生命周期钩子函数 componentWillReact。当组件因为它观察的数据发生了改变，它会安排重新渲染，这个时候 componentWillReact 会被触发。这使得它很容易追溯渲染并找到导致渲染的操作(action)。
-
componentWillReact不接收参数 -
componentWillReact初始化渲染前不会触发 (使用componentWillMount替代) -
componentWillReact对于 mobx-react@4+, 当接收新的 props 时并在setState调用后会触发此钩子 -
要触发
componentWillReact必须在render里面用到被观察的变量 -
使用Mobx之后不会触发
componentWillReceiveProps
1、搭建环境
mkdir my-app
cd my-app
npm init -y
npm i webpack webpack-cli webpack-dev-server -D
npm i html-webpack-plugin -D
npm i babel-loader @babel/core @babel/preset-env -D
npm i @babel/plugin-proposal-decorators @babel/plugin-proposal-class-properties -D
npm i @babel/plugin-transform-runtime -D
npm i @babel/runtime -S
npm i mobx -S
mkdir src
mkdir dist
touch index.html
touch src/index.js
touch webpack.config.js
编写webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
mode: 'development',
entry: path.resolve(__dirname, 'src/index.js'),
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'main.js'
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env'],
plugins: [
//支持装饰器
["@babel/plugin-proposal-decorators", { "legacy": true }],
["@babel/plugin-proposal-class-properties", { "loose" : true }],
['@babel/plugin-transform-runtime']
]
}
}
}
]
},
plugins: [new HtmlWebpackPlugin()],
devtool: 'inline-source-map'
}
编写index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
2、Mobx 入门
(1) observable可观察的状态
- map
import {observable} from 'mobx'
// 声明
const map = observable.map({a: 1, b: 2});
// 设置
map.set('a', 11);
// 获取
console.log(map.get('a'));
console.log(map.get('b'));
// 删除
map.delete('a');
console.log(map.get('a'));
// 判断是否存在属性
console.log(map.has('a'));
- object
import {observable} from 'mobx'
// 声明
const obj = observable({a: 1, b: 2});
// 修改
obj.a = 11;
// 访问
console.log(obj.a, obj.b);
- array
import {observable} from 'mobx'
const arr = observable(['a', 'b', 'c', 'd']);
// 访问
console.log(arr[0], arr[10]);
// 操作
arr.pop();
arr.push('e');
- 基础类型
import {observable} from 'mobx'/
const num = observable.box(10);
const str = observable.box('hello');
const bool = observable.box(true);
// 获得值
console.log(num.get(), str.get(), bool.get());
// 修改值
num.set(100);
str.set('hi');
bool.set(false);
console.log(num.get(), str.get(), bool.get());
(2) observable装饰器
import {observable} from 'mobx'
// observable这个函数可以识别当成普通函数调用还是装饰器调用
// 如果是装饰器，会自动识别数据类型，使用不同的包装转换方案。
class Store{
@observable arr = [];
@observable obj = {a: 1};
@observable map = new Map();
@observable str = 'hello';
@observable num = 123;
@observable bool = false;
}
const store = new Store();
console.log(store);
console.log(store.obj.a);
注意：vscode编译器中，js文件使用装饰器会报红。解决方式：
在根目录编写jsconfig.json
{
"compilerOptions": {
"module": "commonjs",
"target": "es6",
"experimentalDecorators": true
},
"include": ["src/**/*"]
}
(3) 对 observables 作出响应
- 基础代码：
import {observable} from 'mobx'
class Store{
@observable arr = [];
@observable obj = {a: 1};
@observable map = new Map();
@observable str = 'hello';
@observable num = 123;
@observable bool = false;
}
const store = new Store();
- computed
计算值是可以根据现有的状态或其它计算值衍生出的值, 跟vue中的computed非常相似。
const result = computed(()=>store.str + store.num);
console.log(result.get());
// 监听数据的变化
result.observe((change)=>{
console.log('result:', change);
})
//两次对store属性的修改都会引起result的变化
store.str = 'world';
store.num = 220;
computed可作为装饰器， 将result的计算添加到类中：
class Store{
@observable arr = [];
@observable obj = {a: 1};
@observable map = new Map();
@observable str = 'hello';
@observable num = 123;
@observable bool = false;
@computed get result(){
return this.str + this.num;
}
}
- autorun
当你想创建一个响应式函数，而该函数本身永远不会有观察者时,可以使用 mobx.autorun
所提供的函数总是立即被触发一次，然后每次它的依赖关系改变时会再次被触发。
经验法则：如果你有一个函数应该自动运行，但不会产生一个新的值，请使用autorun。 其余情况都应该使用 computed。
//aotu会立即触发一次
autorun(()=>{
console.log(store.str + store.num);
})
autorun(()=>{
console.log(store.result);
})
//两次修改都会引起autorun执行
store.num = 220;
store.str = 'world';
- when
when(predicate: () => boolean, effect?: () => void, options?)
when 观察并运行给定的 predicate，直到返回true。 一旦返回 true，给定的 effect 就会被执行，然后 autorunner(自动运行程序) 会被清理。 该函数返回一个清理器以提前取消自动运行程序。
对于以响应式方式来进行处理或者取消，此函数非常有用。
when(()=>store.bool, ()=>{
console.log('when function run.....');
})
store.bool = true;
- reaction
用法: reaction(() => data, (data, reaction) => { sideEffect }, options?)。
autorun 的变种，对于如何追踪 observable 赋予了更细粒度的控制。 它接收两个函数参数，第一个(数据 函数)是用来追踪并返回数据作为第二个函数(效果 函数)的输入。 不同于 autorun 的是当创建时效果 函数不会直接运行，只有在数据表达式首次返回一个新值后才会运行。 在执行 效果 函数时访问的任何 observable 都不会被追踪。
// reaction
reaction(()=>[store.str, store.num], (arr)=>{
console.log(arr.join('/'));
})
//只要[store.str, store.num]中任意一值发生变化，reaction第二个函数都会执行
store.num = 220;
store.str = 'world';
(4) 改变 observables状态
- action
接上面案例，添加action到类中：
class Store{
@observable arr = [];
@observable obj = {a: 1};
@observable map = new Map();
@observable str = 'hello';
@observable num = 123;
@observable bool = false;
@computed get result(){
return this.str + this.num;
}
@action bar(){
this.str = 'world';
this.num = 40;
}
}
const store = new Store();
//调用action，只会执行一次
store.bar();
- action.bound
action.bound 可以用来自动地将动作绑定到目标对象。
class Store{
@observable arr = [];
@observable obj = {a: 1};
@observable map = new Map();
@observable str = 'hello';
@observable num = 123;
@observable bool = false;
@computed get result(){
return this.str + this.num;
}
@action bar(){
this.str = 'world';
this.num = 40;
}
//this 永远都是正确的
@action.bound foo(){
this.str = 'world';
this.num = 40;
}
}
const store = new Store();
setInterval(store.foo, 1000)
- runInAction
action 只能影响正在运行的函数，而无法影响当前函数调用的异步操作。如果你使用async function来处理业务，那么我们可以使用 runInAction 这个API来解决这个问题。
@action async fzz() {
await new Promise((resolve) => {
setTimeout(() => {
resolve({
num: 220,
str: 'world'
})
}, 1000)
})
runInAction(()=>{
store.num = 220
store.str = 'world'
})
}
3、应用
(1) 在react中使用mobx
在react中使用mobx，需要借助mobx-react。
它的功能相当于在react中使用redux，需要借助react-redux。
首先来搭建环境：
create-react-app react-app
cd react-app
npm run eject
npm i @babel/plugin-proposal-decorators @babel/plugin-proposal-class-properties -D
npm i mobx mobx-react -S
修改package.json中babel的配置：
"babel": {
"presets": [
"react-app"
],
"plugins": [
[
"@babel/plugin-proposal-decorators",
{
"legacy": true
}
],
[
"@babel/plugin-proposal-class-properties",
{
"loose": true
}
]
]
}
注意：vscode编译器中，js文件使用装饰器会报红。解决方式：
在根目录编写写jsconfig.json
{
"compilerOptions": {
"module": "commonjs",
"target": "es6",
"experimentalDecorators": true
},
"include": ["src/**/*"]
}
(2) 项目应用
入口文件：
import { Provider } from 'mobx-react'
<Provider store={homeStore} morestore={moreStore}>
<App></App>
</Provider>
组件：
import { observer, inject } from 'mobx-react'
@inject('store')
@observer
class Swiper extends Component{}
附加
一、create-react-app 支持decorators
yarn add @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())
安装依赖
yarn add 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"
},
...
455
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
