Javascript

在react中使用mobx

本文主要是介绍在react中使用mobx,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

1. 安装

yarn add mobx mobx-react

或者

yarn add mobx mobx-react-lite

mobx-react-lite 只能使用在函数式组件中,而mobx-react能使用在函数式组件和类组件当中。

2. 基本使用

计数器示例

  • 新建store目录,并在此目录下新建一个Counter.js,以创建一个STORE存储状态。
  • 创建一个Counter类。
  • 在构造函数中使用makeObservable/makeAutoObservable将此类与mobx绑定。
  • 定义其中属性为observable,方法为action。
  • 定义一个count属性和三个方法分别为increment、decrement、reset(加1,减一,重置)。

具体代码如下:
image

makeObservable和makeAutoObservable的区别
makeObservable需要指定属性的类型而且需要绑定指向this,
image
makeAutoObservable自动指定属性且自动绑定指向this
image
makeAutoObservable参数二可以排除指定属性,参数三可以设置是否指定this指向

在组件中使用

image
需要注意的是,react组件默认是非响应式的,需要在导出的组件外包裹一个observer使其变为响应式。
image

计算属性computed

image
如果使用makeObservable方式绑定,需要将double定义为computed
image

3. 监听属性

  • 使用autorun
    autorun中使用的属性发生变化时会自动调用以此autorun,在初始化时会先调用一次autorun
    image

  • 使用reaction
    reaction更精细化的监听某个指定属性发生变化,reaction不会在初始化时执行
    reaction第一个参数接收一个函数返回需要监听的属性,第二个参数为回调函数,并接收变化的值和变化前的值
    image

4. 异步处理

image
mobx可以在异步中直接更改属性,但是不推荐这样使用,异步中更改属性需要包裹在runInAction中使用

5. Mobx封装

image
调用封装的mobx
image

这篇关于在react中使用mobx的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!