【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 会重启它，但是容器中的文件将丢失——容器以干净的状态（镜像最初的状态）…...
推理服务为什么用户都断开了 GPU 还在忙：从 cancel propagation 到幽灵解码清理的工程实战
🧠 用户都关页面了，为什么显卡还在持续发热 流式推理一旦进入生产，最让运维困惑的场景之一，就是前端早已超时、客户端连接也已经断开，GPU 利用率却没有立刻回落。很多团队会先怀疑 continuous batching 太激进…...
2026终极指南：如何简单重置JetBrains IDE试用期，告别30天限制烦恼
2026终极指南：如何简单重置JetBrains IDE试用期，告别30天限制烦恼 【免费下载链接】ide-eval-resetter 项目地址: https://gitcode.com/gh_mirrors/id/ide-eval-resetter 你是否正在为JetBrains IDE的30天试用期到期而烦恼？想象一下&…...
2026实战：Java+YOLO跨平台部署终极指南 从服务器到嵌入式全栈落地
一、为什么我们需要JavaYOLO跨平台部署 在AI视觉落地的今天，Python几乎成了YOLO模型开发的标配语言，但当我们真正要把模型推向生产环境时，Python的短板就暴露无遗了：启动慢、内存占用高、打包分发困难、与现有Java生态集成成本高。…...
智慧工地要素识别数据集 塔吊挂钩识别数据集 吊物识别数据集 工地人员识别数据集 目标检测识别 工地识别数据集
计算机视觉数据集简介 数据集核心信息表信息类别具体内容数据集类别计算机视觉领域 - 目标检测数据集，包含挂钩（hook）、升降台（mic）、mic_frame）吊物、人物（people）4 个类别数据数量…...
企业任务管理平台推荐：10 款适合项目协作的工具整理
本文将深入盘点 10 款项目任务管理系统：Worktile、PingCode、Jira、monday.com、Asana、ClickUp、Wrike、Smartsheet、Trello、OpenProject。企业在选择项目任务管理系统时，最常见的问题不是“工具够不够多”，而是“这套系统能不能真正把团队…...
终极指南：用Python轻松读取通达信数据，开启量化分析新时代
终极指南：用Python轻松读取通达信数据，开启量化分析新时代 【免费下载链接】mootdx 通达信数据读取的一个简便使用封装 项目地址: https://gitcode.com/GitHub_Trending/mo/mootdx Mootdx——这个强大的Python库正在改变金融数据分析的游戏规则。…...
2283 美元与 20 小时：Claude Opus 4.6 写出 Chrome Bug 利用链，AI 降低黑客攻击门槛
2283 美元与 20 小时：Claude Opus 4.6 成功写出 Chrome Bug 利用链，AI 降低黑客攻击门槛如果你在网络安全圈，最近肯定被 "Mythos" 刷屏了。Anthropic 研发出一个能挖 Bug 的 AI 模型，但因担心被坏人滥用，未公…...
)
04-08-02 导师与被导师 (Mentoring)
04-08-02 导师与被导师 (Mentoring) 章节概述 本章探讨导师关系的价值以及如何成为好导师和寻找好导师。导师关系是职业发展的加速器，能够帮助你少走弯路，快速成长。核心概念 导师关系的价值 对被导师者： ├─ 获得经验和智慧 ├─ 避免常见错…...
从YOLOv1到v3全解析：原理演进+PyTorch实战训练（超详细
YOLO（You Only Look Once）作为单阶段目标检测的开山之作，凭借速度快、端到端、工程友好的优势，成为实时检测领域的标配算法。本文从v1→v2→v3梳理核心演进逻辑，并手把手带你用YOLOv3完成自定义数据集训练，…...
BiliDownloader：一站式智能下载B站视频的高效解决方案
BiliDownloader：一站式智能下载B站视频的高效解决方案 【免费下载链接】BiliDownloader BiliDownloader是一款界面精简，操作简单且高速下载的b站下载器 项目地址: https://gitcode.com/gh_mirrors/bi/BiliDownloader 在数字化学习与内容消费的时代…...