mobx基础及在react中的使用_使用了mobx,react项目的函数怎么定义(4)

结束

一次完整的面试流程就是这样啦，小编综合了腾讯的面试题做了一份前端面试题PDF文档，里面有面试题的详细解析，分享给小伙伴们，有没有需要的小伙伴们都去领取！

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

一、mobx入门

https://cn.mobx.js.org/

一、observable可观察的状态

https://cn.mobx.js.org/refguide/observable.html

map

import {observable} from 'mobx'
// 声明
const map = observable.map({a: 1, b: 2});
// 设置
map.set('a', 11);
// 获取
console.log(map.get('a'));//11
console.log(map.get('b'));//2
// 删除
map.delete('a');
console.log(map.get('a'));//undefined
// 判断是否存在属性
console.log(map.has('a'));//false

object

import {observable} from 'mobx'
// 声明
const obj = observable({a: 1, b: 2});
// 修改
obj.a = 11;
// 访问
console.log(obj.a, obj.b);//11 2

array

import {observable} from 'mobx'
const arr = observable(['a', 'b', 'c', 'd']);
// 访问
console.log(arr[0], arr[10]);// "a" undefined
// 操作
arr.pop();
arr.push('e');

打印数组的话是个proxy , 同时也具有数组的方法

基础类型

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());//10 hello true
// 修改值
num.set(100);
str.set('hi');
bool.set(false);
console.log(num.get(), str.get(), bool.get());//100 hi false

observable装饰器

安装 npm install --save-dev @babel/plugin-propsal-decorators @babel/plugin-proposal-class-properties @babel/plugin-transform-runtime
每种类型的数据都需要用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/\*\*/\*"]
}

二、对 observables 作出响应

1. computed

计算值是可以根据现有的状态或其它计算值衍生出的值, 跟vue中的computed非常相似。

import {observable,computed} 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();

const result = computed(()=>{
	console.log(1)//初始化会执行一次 修改也会执行
	store.str + store.num
})
console.log(result.get());

// 监听数据的变化
result.observe((change)=>{
  console.log('result:', change);//打印两次 因为store修改了两次
})
//两次对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;
  }  
}

2. 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';

3. when

when(predicate: () => boolean, effect?: () => void, options?)
when 观察并运行给定的 predicate，直到返回true。 一旦返回 true，给定的 effect 就会被执行，然后 autorunner(自动运行程序) 会被清理。 该函数返回一个清理器以提前取消自动运行程序。

对于以响应式方式来进行处理或者取消，此函数非常有用。

when(()=>store.bool, ()=>{
  console.log('when function run.....');
})
store.bool = true;

4. reaction

用法:reaction(() => data, (data, reaction) => { sideEffect }, options?)。

autorun 的变种，对于如何追踪 observable 赋予了更细粒度的控制。

它接收两个函数参数，第一个(数据 函数)是用来追踪并返回数据作为第二个函数(效果 函数)的输入。

不同于 autorun 的是当创建时效果 函数不会直接运行，只有在数据表达式首次返回一个新值后才会运行。 在执行 效果 函数时访问的任何 observable 都不会被追踪。

// reaction 第一个参数的返回值作为第二个参数的输入
reaction(()=>[store.str, store.num], (arr)=>{
  console.log(arr.join('/')); // world/220
})
//只要[store.str, store.num]中任意一值发生变化，reaction第二个函数都会执行
store.num = 220;
store.str = 'world';

三、改变 observables状态

1. action

接上面案例，添加action到类中：

class Store{
  @observable arr = [];
  @observable obj = {a: 1};
  @observable map = new Map();

  @observable str = 'hello';
  @observable num = 123;
  @observable bool = false;
  
  //获取数据@computed
  @computed get result(){
    return this.str + this.num;
  }
//修改数据@action
  @action bar(){
    this.str = 'world';
#### 最后更多分享：**前端字节跳动真题解析**

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**

- ![](https://img-blog.csdnimg.cn/img_convert/e6a7e22e718267b919ece76083ba5395.webp?x-oss-process=image/format,png)



puted
  @computed get result(){
    return this.str + this.num;
  }
//修改数据@action
  @action bar(){
    this.str = 'world';
#### 最后更多分享：**前端字节跳动真题解析**

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**

- [外链图片转存中...(img-ttGRTrwu-1715789904785)]