react04- mvc 、 mvvm

MVC与MVVM

stackoverflow论坛网站

react前端框架

使用框架前: 操作dom ==> js获取dom元素,事件侦听,修改数据,设置样式。。。

  • 操作dom问题:

    • 直接操作dom,会造成大量的回流、重绘,消耗大量性能
    • 操作起来也很麻烦
  • 使用框架后: 数据驱动显示(开发效率更高,性能也更好)

    • 不在直接操作dom
    • 操作数据,修改数据后 ,框架按照相关的数据进行页面的重新渲染
    • 框架的底层实现dom渲染 :构建一套虚拟dom操作真实dom渲染的体系,来避免dom的回流、重绘

react框架采用MVC体系,vue采用MVVM体系 : 这两套体系都是用来实现上面数据驱动显示

  • MVC: module(数据层) + view(视图层) + controller(控制层)

    • 使用jsx语法来构建view试图
    • 构建数据层: 在视图中需要动态处理改变的样式、内容等,都要有对应的数据模型 state中的数据
    • 所谓控制层就是开发的一些列交互用的处理数据的方法
    • 根据业务需求进行某些操作时(修改页面的某些操作),都是修改数据,react框架会按照最新的数据来渲染视图,让用户来看到最新效果
    • 单向驱动只能数据驱动视图(自动),反过来(控制层,自己写的)
    • 在这里插入图片描述
  • MVVM : module + view + viewModule(数据、视图监听层)

    • 可以实现数据驱动视图渲染:监听数据更新, 修改数据,视图自动改变
    • 监听页面中元素的内容的改变,修改视图自动修改数据,实现双向驱动
    • 我与vue不熟

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/745478.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

论文阅读——RingMo

RingMo: A Remote Sensing Foundation Model With Masked Image Modeling 与自然场景相比,RS图像存在以下困难。 1)分辨率和方位范围大:受遥感传感器的影响,图像具有多种空间分辨率。此外,与自然图像的实例通常由于重…

尚硅谷SpringBoot3笔记 (二) Web开发

Servlet,SpringMVC视频推荐:53_尚硅谷_servlet3.0-简介&测试_哔哩哔哩_bilibili HttpServlet 是Java Servlet API 的一个抽象类,用于处理来自客户端的HTTP请求并生成HTTP响应。开发人员可以通过继承HttpServlet类并重写其中的doGet()、do…

【图论】计算图的n-hop邻居个数,并绘制频率分布直方图

计算图的n-hop邻居个数,并绘制频率分布直方图 在图论中,n-hop邻居(或称为K-hop邻居)是指从某个顶点出发,通过最短路径(即最少的边数)可以到达的所有顶点的集合,其中n(或…

JVM及垃圾回收算法

一、JVM 1、jvm的内存组成 五大内存区域,分1.7和1.8 1.堆内存:引用类型的数据,内部组成:1.新生代(伊甸区和幸存者区)2.老年代。该区域经常发生垃圾回收的操作 堆是JVM中最大的一块内存区域,用…

【爬虫】requests.post请求中的data和json使用区别

请求体是键值对形式(无花括号),请求时需要使用data参数处理。 代码: data {...} ret requests.post(url, headersheaders, datadata)请求体是字典形式(有花括号),请求时需要使用json参数处理。…

派对游戏2024年新局面:二超多强,市场细分

2023年末,《元梦之星》上线迎战《蛋仔派对》,网腾大战打响。 这场战役从开局就进入到了白热化,双方投入真金白银来拉拢玩家,于春节这一亲朋相聚最适合派对游戏的时段集中发力,互有胜负。 目前《元梦之星》略处下风&a…

Principled Instructions Are All You Need for Questioning LLaMA-1/2, GPT-3.5/4

Principled Instructions Are All You Need for Questioning LLaMA-1/2, GPT-3.5/4 相关链接:arxiv 关键字:Questioning LLaMA、GPT-3.5/4、guiding principles、prompting、large language models 摘要 本文介绍了26个旨在简化查询和提示大型语言模型&…

自然语言处理NLP:tf-idf原理、参数及实战

大家好,tf-idf作为文体特征提取的常用统计方法之一,适合用于文本分类任务,本文将从原理、参数详解和实际处理方面介绍tf-idf,助力tf-idf用于文本数据分类。 1.tf-idf原理 tf 表示词频,即某单词在某文本中的出现次数与…

力扣 322 零钱兑换

题目描述 给定不同面额的硬币 coins 和一个总金额 amount。编写一个函数来计算可以凑成总金额所需的最少的硬币个数。如果没有任何一种硬币组合能组成总金额,返回 -1。 你可以认为每种硬币的数量是无限的。 示例 1: 输入:coins [1, 2, 5…

x6.js 从流程图组件库中拖拽组件到画布dnd使用

上一篇已经了解到了x6.js常用功能以及使用方法。但我们使用流程图的时候还少不了一个非常重要的功能那就是拖拽组件库里的组件进来。如下图: 首先是布局这块,拖拽组件库的视图中布局无需我们去写,我们只需把界面搭建好。 添加组件库 1.搭建布…

Python 基于 OpenCV 视觉图像处理实战 之 图像相关的基本概念,以及图像的基础操作 二

Python 基于 OpenCV 视觉图像处理实战 之 图像相关的基本概念,以及图像的基础操作 二 目录 Python 基于 OpenCV 视觉图像处理实战 之 图像相关的基本概念,以及图像的基础操作 二 一、简单介绍 二、图像的几何变换 三、插值算法 1、最近邻插值算法 …

java kafka客户端何时设置的kafka消费者默认值

kafka为什么有些属性没有配置却能正常工作,那是因为kafka-clients对有些消费者设置了默认值,具体看下ConsumerConfig类的静态模块,具体如下所示: kafka为什么有些属性没有配置却能正常工作,那是因为kafka-clients对有…

AJAX 02 案例、Bootstrap框架

AJAX 学习 AJAX 2 综合案例黑马 API01 图书管理Bootstrap 官网Bootstrap 弹框图书管理-渲染列表图书管理-添加图书图书管理-删除图书图书管理 - 编辑图书 02 图片上传03 更换图片04 个人信息设置信息渲染头像修改补充知识点:label扩大表单的范围 AJAX 2 综合案例 黑…

【FPGA】DDR3学习笔记(二)丨从SDRAM到DDR3的IP核设计

本篇文章包含的内容 一、DDR SDRAM1.1 基本概述1.2 工作时序(以读取为例) 二、DDR2 SDRAM2.1 基本概述2.2 工作时序 三、DDR3 SDRAM3.1 基本概述3.2 硬件设计3.3 读写时序3.4 MIG IP核设计3.5 读写代码设计 开发板:正点原子的达芬奇开发板&am…

【Leetcode每日一题】 递归 - 合并两个有序链表(难度⭐)(35)

1. 题目解析 题目链接:21. 合并两个有序链表 这个问题的理解其实相当简单,只需看一下示例,基本就能明白其含义了。 2.算法原理 1. 递归函数定义与功能 递归函数的主要任务是将两个有序链表合并成一个新的有序链表,并返回合并后…

Git 学习笔记 三个区域、文件状态、分支、常用命令

Git 学习 GitGit概念VS Code中使用仓库(repository)示例 Git 使用时的三个区域示例 Git 文件状态示例 Git 暂存区示例 Git 回退版本删除文件忽略文件示例 分支分支的使用分支的合并与删除分支的合并冲突 Git常用命令Git远程仓库 (HTTP)步骤远程仓库 克隆…

【Linux】Linux命令速查表

Linux 命令列表 – 目录 文件和目录操作命令 文件权限命令文件压缩和归档命令进程管理命令系统信息命令 联网命令 IO重定向命令环境变量命令 用户管理命令 快捷键命令列表 Bash 快捷键命令 Nano 快捷键命令 VI 快捷键命令 Vim 快捷键命令Linux 命令备忘单常见问题解答 1. 文件和…

[linux]信号处理:信号编码、基本API、自定义函数和集合操作的详解

一、信号的概述 1、定义 信号是 Linux 进程间通信的最古老的方式。信号是软件中断,它是在软件层次 上对中断机制的一种模拟,是一种异步(不等待)通信的方式 。信号可以导致一个正在运行的进程被 另一个正在运行的异步进程中断&a…

PyCharm创建一个简单的Django项目

1.Django简介 Django 是一个开放源代码的 Web 应用程序框架,由 Python 编写而成。它遵循 MVC(模型-视图-控制器)的软件设计模式,采用了 MTV(模型-模板-视图)的架构。Django 的设计目标是使开发复杂的、数据…

【MATLAB源码-第162期】基于matlab的MIMO系统的MMSE检测,软判决和硬判决误码率曲线对比。

操作环境: MATLAB 2022a 1、算法描述 MIMO系统(Multiple-Input Multiple-Output,多输入多输出系统)是现代无线通信技术中的关键技术之一,它能够显著增加通信系统的容量和频谱效率,而不需要增加额外的带宽或发射功率。在MIMO系统…