标签：makeAutoObservable 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，减一，重置）。

具体代码如下：

makeObservable和makeAutoObservable的区别
makeObservable需要指定属性的类型而且需要绑定指向this，

makeAutoObservable自动指定属性且自动绑定指向this

makeAutoObservable参数二可以排除指定属性，参数三可以设置是否指定this指向

在组件中使用

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

计算属性computed

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

3. 监听属性

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

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

4. 异步处理

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

5. Mobx封装

调用封装的mobx

标签：makeAutoObservable,react,mobx,使用,组件,属性
来源： https://www.cnblogs.com/chiyanzhanfeng/p/16664684.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。