React 状态管理 - Mobx 入门(上)

news/2024/7/15 17:14:59 标签: react.js, 前端, 前端框架

Mobx是另一款优秀的状态管理方案

【让我们未来多一种状态管理选型】

响应式状态管理工具

扩展学习资料

名称

链接

备注

mobx 文档

1. MobX 介绍 · MobX 中文文档

mobx

https://medium.com/@Zwenza/how-to-persist-your-mobx-state-4b48b3834a41

英文

Mobx核心概念

  • Mobx提供了一种状态(State)可供观察的解决方案。【在Mobx内部队state进行主动监听】
  • 可观察的状态(Observable state)意味着在Mobx构建的应用中,更细粒度更高效的状态管理。
  • 与Redux中状态变化取决于对比前后差异,Mobx中申明了观察对象便会依据框架本身的能力进行管理

Redux应用流转图

reducer不能直接修改store

Reducer中不能修改Store,不能发生数据突变,这里是执行纯函数的【这样写会留下隐患】

Mobx应用流转图

actions直接修改State

Mobx接入实战

  • Observable State【可观察的状态】
    • Mobx为常用的数据结构(如:对象,数组和类实例)添加了可观察的功能。
    • 使用@observable装饰器更便捷完成添加Observable State功能。
  • Derivations(衍生)
    • 源自任何状态,并且不会再有任何相互作用的东西【包括具体UI和一些计算值】
    • Computed values(计算值):使用纯函数(pure function)从当前可观察状态中衍生出的值。【state变就跟着变】
    • Reactions(反应):当状态改时需要自动发生的副作用。【依赖了state的UI】

 


http://www.niftyadmin.cn/n/5076808.html

相关文章

不容易解的题10.7

885.螺旋矩阵III 885. 螺旋矩阵 III - 力扣(LeetCode)https://leetcode.cn/problems/spiral-matrix-iii/?envTypelist&envIdZCa7r67M模拟题的一种,说难也难,说简单也简单。模拟题有很多套路题,它们的题解差不多&…

JS实现防抖(Debounce)和节流(Throttle)

防抖(Debounce)和节流(Throttle)是用于限制函数调用频率的两种常用技术,可以帮助你控制事件处理函数的执行次数。下面分别是防抖和节流函数的实现示例。 防抖函数(Debounce) 防抖函数意味着当…

【劳动者捍卫自己的权利】

如何进行劳动仲裁说明 当被企业拖欠工资以及其他的侵害劳动者权益的事情是可以通过合法途经解决。即通过劳动仲裁委员会。本文手把手教你如何进行劳动仲裁,维护自己正当合法的权利!(劳动仲裁免费!!!&#x…

VMware和别的服务器 ,组建局域网那些事 。

利用VMware ,实现组件局域网、有可能会受限于WiFi(路由器) 。 通常不会,除非做了网关设置 相关知识: 禁用局域网隔离(LAN Isolation): 某些路由器提供了一个选项,允许您禁…

【Vue】改变 vuex 中的 state ,子组件 watch 监听不到对象值变化。

文章目录 问题描述解决方法 问题描述 state 状态文件&#xff1a; export default {namespaced: true,state: {params: {aa: ,bb: [],}},mutations: {initParams(state) {state.params {aa: ,bb: [],};},},actions: {}, }父组件 <template> <child childParams&q…

Denoising Score Matching (DSM) 去噪得分匹配模型变分推理(VAE)退火郎之万动力学

Denoising Score Matching——DSM 有没有谁通俗的讲一下Denoising score matching? Denoising Score Matching (DSM) 论文 << A Connection Between Score Matching and Denoising Autoencoders>> 作者是将denoising autoencoder和score mathching 联系在了一起…

战略篇-EMC三板斧

电流和水流 最开始学习电路时&#xff0c;大家不理解电压/电势差和电流的概念&#xff0c;就会把电流对应成水流&#xff0c;把电势差对应成水势差&#xff08;如瀑布&#xff09;。 对策的疏和堵以及测试模型 理解疏和堵时&#xff0c;可以把电磁兼容问题等效成洪水。 堵相…

C++11 Qt QFutureWatcher lambda

目录 Lambda 介绍 【QT】Qt之QFutureWatcher 简述 传参&#xff1a; 还可以使用 QProgressDialog 作为阻堵 函数&#xff0c;变成同步&#xff1b; 完成后&#xff0c;关闭&#xff1b; MyQProgressDialog 效果&#xff1a; Lambda 介绍 Lambda 函数也叫匿名函数&…