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不熟

相关推荐

  1. 重温react-04

    2024-03-15 04:56:01       6 阅读
  2. <span style='color:red;'>react</span><span style='color:red;'>03</span>

    react03

    2024-03-15 04:56:01      18 阅读
  3. React04-关于React Props的实践

    2024-03-15 04:56:01       34 阅读
  4. day04--react中批量传递props

    2024-03-15 04:56:01       14 阅读
  5. day04--react中state的简化

    2024-03-15 04:56:01       13 阅读
  6. React 基础学习01

    2024-03-15 04:56:01       43 阅读
  7. React 基础学习02

    2024-03-15 04:56:01       31 阅读
  8. 09 React使用dayjs

    2024-03-15 04:56:01       19 阅读

最近更新

  1. TCP协议是安全的吗?

    2024-03-15 04:56:01       16 阅读
  2. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2024-03-15 04:56:01       16 阅读
  3. 【Python教程】压缩PDF文件大小

    2024-03-15 04:56:01       15 阅读
  4. 通过文章id递归查询所有评论(xml)

    2024-03-15 04:56:01       18 阅读

热门阅读

  1. Flink广播流 BroadcastStream

    2024-03-15 04:56:01       16 阅读
  2. Kafka问题纪要

    2024-03-15 04:56:01       17 阅读
  3. C++面试题和笔试题(五)

    2024-03-15 04:56:01       18 阅读
  4. 题记(54)--L1-050 倒数第N个字符串

    2024-03-15 04:56:01       24 阅读
  5. c++特殊类设计

    2024-03-15 04:56:01       18 阅读
  6. 什么是API签名认证?

    2024-03-15 04:56:01       22 阅读
  7. 2024年科技前瞻:AI辅助研发引领未来创新浪潮

    2024-03-15 04:56:01       21 阅读