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

React与Vue的区别?

一、区别: 

1. 语法

Vue采用自己特有的模板语法;

React是单向的,采用jsx语法创建react元素。

2.监听数据变化的实现原理不同

Vue2.0 通过Object.defineproperty()方法的getter/setter属性, 实现数据劫持, 每次修改完数据会触发diff算法(双端对比)

React默认是通过shouldComponentUpdata生命周期来决定是否需要渲染更新, 再触发它的diff算法(比较引用)如果不优化可能导致大量不必要的VDOM的重新渲染。

为什么React不精确监听数据变化呢?这是因为Vue和React设计理念上的区别,Vue使用的是可变数据,而React更强调数据的不可变,两者没有好坏之分,Vue更加简单,而React构建大型应用的时候更好。

3.数据绑定(原理)

Vue是双向绑定的,它最核心的功能有2个: 1. 响应式的数据绑定系统; 2. 组件系统

二、优缺点(待整理)

Vue:

简单、快速、强大、对模块友好,但不支持IE8。

1. 简单:官方文档很清晰,比 Angular 简单易学。

2. 快速:异步批处理方式更新 DOM。

3. 组合:用解耦的、可复用的组件组合你的应用程序。

4. 紧凑:~18kb min+gzip,且无依赖。

5. 强大:表达式 & 无需声明依赖的可推导属性 (computed properties)。

6. 对模块友好:可以通过 NPM、Bower 或 Duo 安装,不强迫你所有的代码都遵循 Angular 的各种规定,使用场景更加灵活。

React:

速度快、跨浏览器兼容、模块化;

但学习曲线陡峭,需要深入的知识来构建应用程序。

1. 速度快:在UI渲染过程中,React通过在虚拟DOM中的微操作来实现对实际DOM的局部更新。

2. 跨浏览器兼容:虚拟DOM帮助我们解决了跨浏览器问题,它为我们提供了标准化的API,甚至在IE8中都是没问题的。

3. 模块化:为你程序编写独立的模块化UI组件,这样当某个或某些组件出现问题是,可以方便地进行隔离。

4. 单向数据流:Flux是一个用于在JavaScript应用中创建单向数据层的架构,它随着React视图库的开发而被Facebook概念化。

5. 同构、纯粹的javascript:因为搜索引擎的爬虫程序依赖的是服务端响应而不是JavaScript的执行,预渲染你的应用有助于搜索引擎优化。

6. 兼容性好:比如使用RequireJS来加载和打包,而Browserify和Webpack适用于构建大型应用。它们使得那些艰难的任务不再让人望而生畏。

React本身只是一个V而已,并不是一个完整的框架,所以如果是大型项目想要一套完整的框架的话,基本都需要加上ReactRouter和Flux才能写大型应用。

陡峭的学习曲线:由于复杂的设置过程,属性,功能和结构,它需要深入的知识来构建应用程序。

react更适合构建大型应用, 为什么呢?

1. 通过 React 构建组件,使得代码更加容易得到复用,能够很好的应用在大项目的开发中。

http://www.lryc.cn/news/353271.html

相关文章:

  • leetcode 2115.从给定原材料中找到所有可以做出的菜
  • Opencompass模型评测教程
  • 什么是安全测试,如何进行安全测试?
  • ros的pcl库中对于自己定义的消息,调用pcl库时总是报错 c++
  • DataFrame—数据汇总6
  • Java入门基础学习笔记41——实体类
  • 【Linux】信号之信号的保存和处理详解
  • 基于Django的图书管理系统
  • js实现元素根据鼠标滚轮滚动向左右上下滑动着从模糊到清楚显示出来
  • yocto学习
  • 【IC设计】牛客网-序列检测习题总结
  • python爬虫登录到海康相机管理页面
  • 9.Docker网络
  • Windows VS2022 C语言使用 sqlite3.dll 访问 SQLite数据库
  • java库和包的概念
  • mysql内存结构
  • Python | Leetcode Python题解之第111题二叉树的最小深度
  • c++二进制输出
  • 5. C++网络编程-UDP协议的实现
  • Altium Designer 中键拖动,滚轮缩放,并修改缩放速度
  • python从入门到精通04
  • tomcat三级指导
  • 不知道是该怎么引用多个函数片段?具体示例如代码
  • P3128 [USACO15DEC] Max Flow P题解(树上差分,最近公共祖先,图论)
  • 在Linux上面部署ELK
  • Langchain-Chatchat的markdownHeaderTextSplitter使用
  • 掩码生成蒸馏——知识蒸馏
  • 【C#实战】Newtonsoft.Json基类子类解析
  • 表达式求值的相关语法知识(C语言)
  • 开发中遇到Electron自定义窗口的问题