当前位置: 首页 > news >正文

降低Mobx技术债问题-React前端数据流方案调研整理

我们现在主要是使用Mobx,但是Mobx的易于上手和灵活度也带来了很多预期以外的问题,随着项目的增长我们的代码技术债变得愈加沉重,不同的模块杂糅一起、单一store无限膨胀。
为此我们的调研是希望能找到一个更好的state配置、数据流的约定方案。
我们预期解决的问题:

  1. 更好地控制Mobx的复杂度,正确地拆分Store和管理内部的state。
  2. 虽然做不到单向数据流,但是数据流走向可追溯。
  • 是否能借鉴其他方案的分层管理、人为约定出一个更清晰的处理方案?
  1. 如何调试组件内Mobx的管理?
  • mobx dev tool。
  • mobx本身提供的spy API的能力。
  1. 特殊场景下的方案:
  • 能否做到compute 缓存之前的记忆,或者之前的数据和之后对比。
  • 主动订阅场景(已解决:通过mobx的reaction)

查阅的相关文章

浅谈React数据流管理
Mvvm 前端数据流框架精讲
前端数据流选型
React 体系下关于 Mobx 与 Redux 的一些思考

数据流管理方案的调研投票

目前来说主要有以下几个投票方案。

react-redux

现有比较火的是react-redux-toolkit,国内常用的umi+dva的方案也是redux的一个封装。

结论

在下面的redux vs mobx

Mobx

Mobx的文档
Mobx-长篇源码解读,一文搞懂原理
MobX State Tree数据组件化开发
浅析了一些源码处理,可作为入门读物:一次搞懂Mobx,项目再也不踩坑_(:3」∠)_

  • Mobx
  • Mobx-state-tree
  • Mobx+immer
结论

经过调研,Mobx-state-tree不就是mobx+immer嘛。然后immer的调研结论在下面,为了不让我们的改造变得更复杂,这些东西都可以以后考虑,因此就不扩展了。

Immer

(讲了使用方式和一些注意事项,但是没有源码解析,推荐阅读) Immer 最佳实践(走心教程)
重构利器:如何用 Immer 优雅地管理应用状态
为什么说 90% 的情况下,immer 完胜 immutable?
(一般)[ Immer 源码 ] 来聊聊 Immer 实现不可变数据结构
不可变数据流的完美解决方案——Immer 源码解读
(一个基础的todolist demo)不可变数据 - Immer.js 改造 reducer
在这里插入图片描述

结论

很好的东西,是为了解决副作用问题,但是我们项目应该用不太上,或者说不是必须的。可以先改重要的东西,不要太着急引入新技术栈,否则反而增加开发负担+增加改造的复杂度。

zustand

类似于轻量级的context+redux结合体。有中间件可以方便处理数据。
不过觉得有一个数据流管理就行啦,多了增加开发心智负担,因此不引入。

jotai

懒得看了。

Redux vs Mobx

经过组内讨论,Redux使用起来实在更复杂步骤更多,我们的项目已经很成熟了,转换过去一是浪费大量时间,二是Redux也不一定能解决我们项目现有的技术债问题。
因为我们的问题主要是历史原因,导致store无限膨胀、不同的模块杂糅。

而且相较而言,Mobx有如下优点:

  1. 作为响应式编程,渲染更快;
  2. 同一改动的代码量更少。
  3. 使用高阶hook自动进行浅比较优化性能。

综上,再加上我们原本就是用的mobx,就酱紫了。

Mobx使用约定

  1. 明确规定不同的模块在不同的mobx store中。
  2. 非必要不提升状态。页面业务级的数据应当考虑放在context中。明确我们的数据类型,暂时将数据类型分为两部分:1. 业务数据。2. UI状态数据。

mobx存放的是:

  • @action需处理和的公共业务数据。
  • 涉及多个组件的公共业务数据。
  • 控制页面的UI状态数据。

除此之外,下面数据将考虑放置在context / state中。

  • 涉及当前组件的UI状态数据。
  • 涉及当前组件及子组件的UI状态数据、非公共业务数据。
  1. 降低复杂度,数据可追溯:一个observable的变量对应一个action,参考redux的形式。

调试Mobx

使用mobx-devtool查看mobx内的数据如何流转,进行调试

  • 安装谷歌插件MobX Developer Tools,可以看到具体的数据变化和字段值。比较可视化。(还有不要下错了还有一个Pro的插件,我试了一点用没有)
  • mobx spy观察。
import { spy } from 'mobx';
spy(e=>console.log(e))

相关文章:

降低Mobx技术债问题-React前端数据流方案调研整理

我们现在主要是使用Mobx,但是Mobx的易于上手和灵活度也带来了很多预期以外的问题,随着项目的增长我们的代码技术债变得愈加沉重,不同的模块杂糅一起、单一store无限膨胀。 为此我们的调研是希望能找到一个更好的state配置、数据流的约定方案。…...

RabbitMQ消息可靠性保证机制7--可靠性分析-rabbitmq_tracing插件

rabbitmq_tracing插件 rabbitmq_tracing插件相当于Firehose的GUI版本,它同样能跟踪RabbitMQ中消息的注入流出情况。rabbitmq_tracing插件同样会对流入流出的消息进行封装,然后将封装后的消息日志存入相应的trace文件中。 # 开启插件 rabbitmq-plugins …...

SQL进阶技巧:如何求解直接线上最多的点数?

目录 0 问题描述 1 数据准备 2 问题分析 3 求解优化 步骤一:构建 “斜率键” 并统计点的数量(核心步骤) 步骤二:找出最多的点数(最终结果) 0 问题描述 “平面上最多的点数” 问题通常是指在一个二维平面中给定了若干个点的坐标(例如以 (x,y) 的形式表示),要求找…...

【老白学 Java】泛型应用 - 卡拉 OK(四)

泛型应用 - 卡拉 OK(四) 文章来源:《Head First Java》修炼感悟。 上文说到,解决了按歌名排序的问题后,老白立刻想到了按歌手名字排序的问题。 老白决定趁热打铁,尝试着实现自定义排序方式。 Collections…...

android studio更改应用图片,和应用名字。

更改应用图标,和名字 先打开AndroidManifest.xml文件。 更改图片文件名字( 右键-->构建-->重命名(R))...

SQL Server 表值函数使用示例

在 SQL Server 中,表值函数(Table-Valued Functions, TVFs)是一种用户定义函数,它可以返回一个表。表值函数有两种类型:内联表值函数(Inline Table-Valued Function)和多语句表值函数(Multi-Statement Table-Valued Function)。下面分别介绍这两种类型的表值函数及其使…...

SpringBoot项目的创建方式

目录 1.通过idea创建SpringBoot项目 2.在idea中通过aliyun创建SpringBoot 3.通过spring官网下载再用idea打开 5.通过mavenjava项目改为springboot项目 6.测试springboot 第二种方法使用的是idea2021版本,其余方法使用idea2017版本 1.通过idea创建SpringBoot项…...

微服务设计(第2版)读书笔记

微服务概述 什么是微服务? 答:微服务(microservice)是基于业务领域建模的,可独立发布的服务。它会把业务内聚的功能封装起来,并通过网络供其他服务访问。将这样的服务组合起来构建出更复杂的系统。 微服务…...

idea无法识别文件,如何把floder文件恢复成model

前景: 昨天,我在之前的A1214模块包下新增了一个demo类,然后又新建了一个A1216模块,写了算法题,后面打算用git提交,发现之前的A1214模块下的demo类和新建的模块源文件都已经被追踪了,都是绿色的&…...

vscode的keil assistant 中搜索不到全局变量

搜不到 但是在包含的文件中输入 ../../../,就是全局搜索的结果 我的文件结构是:\Desktop\LVGL文件系统移植(lvgl8.3)\Projects\MDK-ARM 盲猜是keil assistant 当前文件夹打开的时候是进入到了MDK-ARM文件夹层次&…...

html+css网页设计 美食 餐饮杰12个页面

htmlcss网页设计 美食 餐饮杰12个页面 网页作品代码简单,可使用任意HTML辑软件(如:Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad 等任意html编辑软件进行运行及修改编辑等操作)。 获取源码 1&#xff…...

重撸设计模式--代理模式

文章目录 定义UML图代理模式主要有以下几种常见类型:代理模式涉及的主要角色有:C 代码示例 定义 代理模式(Proxy Pattern)属于结构型设计模式,它为其他对象提供一种代理以控制对这个对象的访问。 通过引入代理对象&am…...

Redis性能调优:深入剖析变慢原因及应对策略

如果观察到,这个实例的运行延迟是正常 Redis 基准性能的 2 倍以上,即可认为这个 Redis 实例确实变慢了。 1.如何查看实例的运行延迟 (1)redis-cli -h 127.0.0.1 -p 6379 --intrinsic-latency 60 执行该命令,就可以测…...

Python联合Halcon的详细教程

以下是一份Python联合Halcon的详细教程: 一、简介 Halcon是一款由德国MVTec公司开发的高级机器视觉软件,提供了一套强大的图像处理库,包括特征检测、识别、测量等功能。Python联合Halcon是一种将Python编程语言与计算机视觉库Halcon集成的应…...

raid 状态查看 storcli64

场景 当磁盘报错的时候使用该命令排查 fdisk -l /dev/sdb fdisk: cannot open /dev/sdb: Input/output error进一步使用 smartctl 排查 smartctl -a /dev/sdb 输出 smartctl 7.1 2019-12-30 r5022 [x86_64-linux-5.4.0-144-generic] (local build) Copyright (C) 2002-19, B…...

时间管理系统|Java|SSM|JSP|

【技术栈】 1⃣️:架构: B/S、MVC 2⃣️:系统环境:Windowsh/Mac 3⃣️:开发环境:IDEA、JDK1.8、Maven、Mysql5.7 4⃣️:技术栈:Java、Mysql、SSM、Mybatis-Plus、JSP、jquery,html 5⃣️数据库可…...

使用Docker启用MySQL8.0.11

目录 一、Docker减小镜像大小的方式 1、基础镜像选择 2、减少镜像层数 3、清理无用文件和缓存 4、优化文件复制(COPY和ADD指令) 二、Docker镜像多阶段构建 1、什么是dockers镜像多阶段构建 1.1 概念介绍 1.2 构建过程和优势 2、怎样在Dockerfil…...

Qt之修改窗口标题、图标以及自定义标题栏(九)

Qt开发 系列文章 - titles-icons-titlebars(九) 目录 前言 一、修改标题 二、添加图标 三、更换标题栏 1.效果演示 2.创建标题栏类 3.定义相关函数 4.使用标题栏类 总结 前言 在我们利用Qt设计软件时,经常需要修改窗口标题、更改软…...

每天40分玩转Django:Django测试

Django测试 一、今日学习内容概述 学习模块重要程度主要内容测试基础⭐⭐⭐⭐⭐TestCase、断言方法模型测试⭐⭐⭐⭐⭐模型方法、数据验证视图测试⭐⭐⭐⭐请求处理、响应验证表单测试⭐⭐⭐⭐表单验证、数据处理覆盖率测试⭐⭐⭐⭐coverage配置、报告生成 二、测试基础示例…...

JS子页面调用父页面函数,监听刷新事件

目录 1.子页面调用父页面的函数 2.监听刷新事件 1.子页面调用父页面的方法 我们先来说说什么是子页面,在我这里子页面就是域名一样,然后使用iframe引入的页面就是我所说的子页面,为什么需要用到这个功能,是为了实现跨页面交互与…...

RestClient

什么是RestClient RestClient 是 Elasticsearch 官方提供的 Java 低级 REST 客户端,它允许HTTP与Elasticsearch 集群通信,而无需处理 JSON 序列化/反序列化等底层细节。它是 Elasticsearch Java API 客户端的基础。 RestClient 主要特点 轻量级&#xff…...

接口测试中缓存处理策略

在接口测试中,缓存处理策略是一个关键环节,直接影响测试结果的准确性和可靠性。合理的缓存处理策略能够确保测试环境的一致性,避免因缓存数据导致的测试偏差。以下是接口测试中常见的缓存处理策略及其详细说明: 一、缓存处理的核…...

Vue3 + Element Plus + TypeScript中el-transfer穿梭框组件使用详解及示例

使用详解 Element Plus 的 el-transfer 组件是一个强大的穿梭框组件,常用于在两个集合之间进行数据转移,如权限分配、数据选择等场景。下面我将详细介绍其用法并提供一个完整示例。 核心特性与用法 基本属性 v-model:绑定右侧列表的值&…...

蓝牙 BLE 扫描面试题大全(2):进阶面试题与实战演练

前文覆盖了 BLE 扫描的基础概念与经典问题蓝牙 BLE 扫描面试题大全(1):从基础到实战的深度解析-CSDN博客,但实际面试中,企业更关注候选人对复杂场景的应对能力(如多设备并发扫描、低功耗与高发现率的平衡)和前沿技术的…...

vue3 字体颜色设置的多种方式

在Vue 3中设置字体颜色可以通过多种方式实现&#xff0c;这取决于你是想在组件内部直接设置&#xff0c;还是在CSS/SCSS/LESS等样式文件中定义。以下是几种常见的方法&#xff1a; 1. 内联样式 你可以直接在模板中使用style绑定来设置字体颜色。 <template><div :s…...

如何为服务器生成TLS证书

TLS&#xff08;Transport Layer Security&#xff09;证书是确保网络通信安全的重要手段&#xff0c;它通过加密技术保护传输的数据不被窃听和篡改。在服务器上配置TLS证书&#xff0c;可以使用户通过HTTPS协议安全地访问您的网站。本文将详细介绍如何在服务器上生成一个TLS证…...

新能源汽车智慧充电桩管理方案:新能源充电桩散热问题及消防安全监管方案

随着新能源汽车的快速普及&#xff0c;充电桩作为核心配套设施&#xff0c;其安全性与可靠性备受关注。然而&#xff0c;在高温、高负荷运行环境下&#xff0c;充电桩的散热问题与消防安全隐患日益凸显&#xff0c;成为制约行业发展的关键瓶颈。 如何通过智慧化管理手段优化散…...

2025盘古石杯决赛【手机取证】

前言 第三届盘古石杯国际电子数据取证大赛决赛 最后一题没有解出来&#xff0c;实在找不到&#xff0c;希望有大佬教一下我。 还有就会议时间&#xff0c;我感觉不是图片时间&#xff0c;因为在电脑看到是其他时间用老会议系统开的会。 手机取证 1、分析鸿蒙手机检材&#x…...

爬虫基础学习day2

# 爬虫设计领域 工商&#xff1a;企查查、天眼查短视频&#xff1a;抖音、快手、西瓜 ---> 飞瓜电商&#xff1a;京东、淘宝、聚美优品、亚马逊 ---> 分析店铺经营决策标题、排名航空&#xff1a;抓取所有航空公司价格 ---> 去哪儿自媒体&#xff1a;采集自媒体数据进…...

【SSH疑难排查】轻松解决新版OpenSSH连接旧服务器的“no matching...“系列算法协商失败问题

【SSH疑难排查】轻松解决新版OpenSSH连接旧服务器的"no matching..."系列算法协商失败问题 摘要&#xff1a; 近期&#xff0c;在使用较新版本的OpenSSH客户端连接老旧SSH服务器时&#xff0c;会遇到 "no matching key exchange method found"​, "n…...