欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

vue和react比较

程序员文章站 2022-06-24 19:42:23
...

相似之处:
1. 使用virtual DOM
2. 提供响应式和组件化的视图组件
3. 将注意力集中保持在核心库,将其他功能如路由、全局状态管理交个其他插件

不同之处:

  1. React 和 Vue 在大部分常见场景下都能提供近似的性能,通常 Vue 会有少量优势,因为 Vue 的 Virtual DOM 实现相对更为轻量一些。

  2. 优化方面,react应用中,某个组件的状态变化时,其会以这个组件为根,重新渲染整个子组件树,你需要在所有可能的地方使用 PureComponent,或者手动实现shouldcomponentupdata函数来优化,同时你可能会需要使用不可变的数据结构来使得你的组件更容易被优化。这使得 React 中的组件优化伴随着相当的心智负担。

  3. JSX vs Templates

    你可以使用完整的编程语言 JavaScript 功能来构建你的视图页面。比如你可以使用临时变量、JS 自带的流程控制、以及直接引用当前 JS 作用域中的值等等。
    开发工具对 JSX 的支持相比于现有可用的其他 Vue 模板还是比较先进的(比如,linting、类型检查、编辑器的自动完成)。
    对于很多习惯了 HTML 的开发者来说,模板比起 JSX 读写起来更自然。这里当然有主观偏好的成分,但如果这种区别会导致开发效率的提升,那么它就有客观的价值存在。
    基于 HTML 的模板使得将已有的应用逐步迁移到 Vue 更为容易。
    这也使得设计师和新人开发者更容易理解和参与到项目中。
    你甚至可以使用其他模板预处理器,比如 Pug 来书写 Vue 的模板。
    当然其实vue也支持jsx和render函数
  4. 向上扩展

    vuex redux     
    router机制     
    cli机制  vue相对配置灵活一些
    整体来说react社区更加繁荣
    react官方只维护react核心库,其他交给社区
  5. 向下扩展 vue相对来说比较容易适应 react学习成本高一些,jsx思维、写法比较创新

  6. 都有native rn(成熟) weex

  7. chrome 开发工具

  8. 双向数据绑定不同

react是单向数据绑定,setState()会放弃新状态,然后通知虚拟DOM进行视图更新,必须手动绑定onchange进行函数调用,进而实现双向数据绑定

vue是基于数据劫持和订阅发布的双向数据绑定,主要是对状态的set和get行为劫持,然后通知watcher更新依赖,虚拟DOM会会进行diff,然后进行最小代价的更新视图。
DOM方向则是进行事件监听,回调函数中通知data进行变动

持续更新