【React】04.MVC模式和MVVM模式
React是Web前端框架
1、目前市面上比较主流的前端框架
- React
- Angular（NG框架）
- Vue
主流的思想：
不在直接去操作DOM，而是改为“数据驱动思想”
操作DOM思想：
- 操作DOM比较消耗性能[主要原因就是，可能会导致DOM重排（回流）/重绘]
- 操作起来也相对麻烦一些
数据驱动思想：
- 我们不会在直接操作DOM
- 我们去操作数据[当我们修改了数据，框架会按照相关的数据，让页面重新渲染]
- 框架底层实现视图的渲染，也是基于操作DOM完成的。
构建了一套虚拟DOm -> 真实DOM 的渲染体系
有效避免了DOm的重排/重绘 - 开发效率更高、最后的性能也相对较好
stackoverflow
操作DOM的demo
<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1" /><meta name="theme-color" content="#000000" /><metaname="description"content="Web site created using create-react-app"/><title>操作DOM的demo</title></head><body><span id="textBox">0</span><br /><button id="submit">累加</button><script>// 想操作谁，先获取谁let textBox = document.querySelector("#textBox"),submit = document.querySelector("#submit");// 事件绑定let num = 0;submit.addEventListener("click", function () {num++;textBox.innerHTML = num;});</script></body>
</html>
2、React框架采用的是MVC体系；Vue框架采用的是MVVM体系
MVC：modal数据层 + view视图层 + controller控制层
- 按照专业的语法去构建试图（页面）：React中是基于jsx语法来构建视图的
- 构建数据层：但凡在视图中，需要“动态”处理的（获取需要变化的，不论是样式还是内容），我们都要有对应的数据模型
- 控制层：当我们在视图中（或者根据业务需求）进行某些操作的时候，都是去修改相关的数据，然后React框架会按照最新的数据，重新渲染视图，以此让用户看到最新的效果。
单项数据驱动：数据驱动视图的渲染！！
视图中的表单内容改变，想要修改数据，需要开发者自己去写代码实现
“单向驱动”
MVVM：modal数据层 + view视图层 + viewModel数据/试图监听层
- 数据驱动视图的渲染：修改数据，视图会跟着更新
- 试图驱动数据的更改：监听页面中表单元素内容改变，自动去修改相关的数据
“双向驱动”
相关文章：
【React】04.MVC模式和MVVM模式
React是Web前端框架 1、目前市面上比较主流的前端框架 ReactAngular（NG框架）Vue 主流的思想： 不在直接去操作DOM，而是改为“数据驱动思想” 操作DOM思想： 操作DOM比较消耗性能[主要原因就是，可能会导…...
调试代码0
dev_update_off () * read_image (Image, C:/Users/Public/Documents/MVTec/HALCON-12.0/examples/images/smd/smd_on_chip_01.png) read_image (Image, D:/图像文件/图片/图片/基板/20230609-103004-0.bmp) get_image_size (Image, Width, Height) * dev_close_window () * de…...
【C++心愿便利店】No.12---C++之探索string底层实现
文章目录 前言一、写实拷贝（了解）二、string类常用接口实现2.1 成员变量2.2 默认构造函数2.3 拷贝构造函数2.4 operator2.5 operator[]2.6 c_str2.7 size()2.8 capacity() 三、迭代器的实现3.1 begin()和end()3.2 范围for 四、string类增删查改4.1 reser…...
Android Studio(列表视图ListView)
前言 前面在适配器章节，已经介绍了ListView的作用(干什么的)，这节将主要介绍如何去设计ListView页面视图。 思考 列表视图需要些什么？ 1. 列表项容器（装载各列表项的容器）：<ListView/> 2. 列表项布局…...
让深度神经网络绘画以了解它们是如何工作的
一、说明 深度学习如此有效，这真是一个谜。尽管有一些关于深度神经网络为何如此有效的线索，但事实是没有人完全确定，并且深度学习的理论理解是一个非常活跃的研究领域。 在本教程中，我们将以一种不寻常的方式触及问题的一个小方面…...
https://www.jianshu.com/p/34bf240b85a9
https://www.jianshu.com/p/34bf240b85a9 https://www.eccee.com/soft-platform/991.html...
如何导出PPT画的图为高清图片？插入到world后不压缩图像的设置方法？
期刊投稿的时候，需要图片保持一定的清晰度数，那么我们怎么才能从PPT中导出符合要求的图片呢？ 对于矢量图绘图软件所画的图，直接导出即可。 而PPT导出的图片清晰度在60pi，就很模糊。 整体思路： PPT绘图——…...
【Spring】Spring IOC DI
Spring IOC & DI IOC DI入门什么是Spring什么是容器什么是IOC IOC介绍传统程序开发解决方案 DI IOC详解Bean的存储Controller(控制器存储)Service(服务存储)Repository(仓库存储)Component(组件存储)Configuration(配置存储) 为什么需要这么多类注解类注解之间的关系方法注…...
一招解密网络流量瓶颈！
前言 我们曾介绍过观测云提供全面的基础设施监测方案（参见《全方位监控基础设施，坚实守护您的业务稳定！》），能够高效全面地帮助您实时观测所有的基础设施对象及云产品等，赋能您的业务稳定发展。今天我们将…...
某校帮签到小程序m 加密参数解析
小程序解密清参考我以前的文章 VX小程序逆向 js版本 function n(e, a) {var t (65535 & e) (65535 & a);return (e >> 16) (a >> 16) (t >> 16) << 16 | 65535 & t };function i(e, a, t, n, r, i, s) {return o(a & n | t &…...
Node.js |（六）express框架 | 尚硅谷2023版Node.js零基础视频教程
学习视频：尚硅谷2023版Node.js零基础视频教程，nodejs新手到高手 文章目录 📚express使用🐇初体验🐇express路由⭐️路由的使用⭐️获取请求参数⭐️获取路由参数🔥练习：根据路由参数响应歌手信息…...
包教包会：Mysql主从复制搭建
笑小枫的专属目录 一、无聊的理论知识1. 主从复制原理2. 主从复制的工作过程3. MySQL四种同步方式 二、docker下安装、启动mysql1. 安装主库2. 安装从库 三、配置Master(主)四、配置Slave(从)五、链接Master(主)和Slave(从)六、主从复制排错1. 错误：error connectin…...
Subset Selection
白话解释：https://www.geeksforgeeks.org/feature-subset-selection-process/ 貌似有一种比较常见的方法，称为多元逐步回归有3种筛选自变量的方法 （1）向前法：n个因变量情况，慢慢增加因变量到方程中&#x…...
【测开求职】面试题：计算机网络 精简版整理
本篇文章整理的是在秋招过程中遇到的计算机网络高频面试题，应付部分中小厂的测试开发工程师面试完全没有问题，如果时间充足的话，建议再看一下笔者的另外一篇文章：【测开求职】面试题：计算机网络 详细版整理，会让你对整个计算机网络有足够全面深刻的理解，亲测应付各个大厂…...
)
设计模式-代理模式(delegate)
什么是代理？ 代理(Proxy)是一种设计模式,提供了对目标对象另外的访问方式;即通过代理对象访问目标对象.这样做的好处是:可以在目标对象实现的基础上,增强额外的功能操作,即扩展目标对象的功能. 这里使用到编程中的一个思想:不要随意去修改别人已经写好的代码或者方…...
MongoDB 安装与配置
MongoDB 安装与配置 MongoDB 是一个高性能、开源的 NoSQL 数据库，它提供了丰富的查询功能和高可用性。本文将详细讲解 MongoDB 的安装与配置过程。 1. MongoDB 安装 1.1 Windows 平台安装 下载 MongoDB 安装包 访问 MongoDB 官方下载页面（https://w…...
rabbitMq创建交换机，以及路由键绑定队列教程
创建交换机： 创建队列： 创建路由，绑定到交换机：...
odoo16前端框架源码阅读——ormService.js
odoo16前端框架源码阅读——ormService.js 路径：addons\web\static\src\core\orm_service.js 简单翻译一下代码中的注释： ORM服务是js代码和python的ORM层通信的标准方法。 然后讲了One2many and Many2many特使的指令格式，每个指令都是3元…...
详谈滑动窗口算法与KMP算法区别以及二者在什么场景下使用
什么是滑动窗口算法 滑动窗口算法是一种用于解决数组（或字符串）中子数组（或子字符串）问题的算法。该算法通过维护一个固定大小的窗口（通常是两个指针），该窗口在数组上滑动，以寻找符…...
k8s、数据存储
数据存储的概念 容器磁盘上的文件的生命周期是短暂的，这就使得在容器中运行重要应用时会出现一些问题。首先，当容器崩溃时，kubelet 会重启它，但是容器中的文件将丢失——容器以干净的状态（镜像最初的状态）…...
JavaSec-RCE
简介 RCE(Remote Code Execution)，可以分为:命令注入(Command Injection)、代码注入(Code Injection) 代码注入 1.漏洞场景：Groovy代码注入 Groovy是一种基于JVM的动态语言，语法简洁，支持闭包、动态类型和Java互操作性，…...
树莓派超全系列教程文档--(61)树莓派摄像头高级使用方法
树莓派摄像头高级使用方法 配置通过调谐文件来调整相机行为 使用多个摄像头安装 libcam 和 rpicam-apps依赖关系开发包 文章来源： http://raspberry.dns8844.cn/documentation 原文网址 配置 大多数用例自动工作，无需更改相机配置。但是，一…...
C++：std::is_convertible
C++标志库中提供is_convertible，可以测试一种类型是否可以转换为另一只类型： template <class From, class To> struct is_convertible; 使用举例： #include <iostream> #include <string>using namespace std;struct A { }; struct B : A { };int main…...
逻辑回归：给不确定性划界的分类大师
想象你是一名医生。面对患者的检查报告（肿瘤大小、血液指标），你需要做出一个**决定性判断**：恶性还是良性？这种“非黑即白”的抉择，正是**逻辑回归（Logistic Regression）** 的战场&a…...
Java如何权衡是使用无序的数组还是有序的数组
在 Java 中，选择有序数组还是无序数组取决于具体场景的性能需求与操作特点。以下是关键权衡因素及决策指南： ⚖️ 核心权衡维度 维度有序数组无序数组查询性能二分查找 O(log n) ✅线性扫描 O(n) ❌插入/删除需移位维护顺序 O(n) ❌直接操作尾部 O(1) ✅内存开销与无序数组相…...
【Java_EE】Spring MVC
目录 Spring Web MVC 编辑注解 RestController RequestMapping RequestParam RequestParam RequestBody PathVariable RequestPart 参数传递 注意事项 编辑参数重命名 RequestParam 编辑编辑传递集合 RequestParam 传递JSON数据 编辑RequestBody …...
拉力测试cuda pytorch 把 4070显卡拉满
import torch import timedef stress_test_gpu(matrix_size16384, duration300):"""对GPU进行压力测试，通过持续的矩阵乘法来最大化GPU利用率参数:matrix_size: 矩阵维度大小，增大可提高计算复杂度duration: 测试持续时间（秒&…...
Mac下Android Studio扫描根目录卡死问题记录
环境信息 操作系统: macOS 15.5 (Apple M2芯片)Android Studio版本: Meerkat Feature Drop | 2024.3.2 Patch 1 (Build #AI-243.26053.27.2432.13536105, 2025年5月22日构建) 问题现象 在项目开发过程中，提示一个依赖外部头文件的cpp源文件需要同步，点…...
从 GreenPlum 到镜舟数据库：杭银消费金融湖仓一体转型实践
作者：吴岐诗，杭银消费金融大数据应用开发工程师 本文整理自杭银消费金融大数据应用开发工程师在StarRocks Summit Asia 2024的分享 引言：融合数据湖与数仓的创新之路 在数字金融时代，数据已成为金融机构的核心竞争力。杭银消费金…...
比较数据迁移后MySQL数据库和OceanBase数据仓库中的表
设计一个MySQL数据库和OceanBase数据仓库的表数据比较的详细程序流程，两张表是相同的结构，都有整型主键id字段，需要每次从数据库分批取得2000条数据，用于比较，比较操作的同时可以再取2000条数据，等上一次比较完成之后，开始比较，直到比较完所有的数据。比较操作需要比较…...