Vue与React比较

ⅰ亾dé卋堺 提交于 2021-01-18 05:53:46
与React
相似:
(1)虚拟DOM(Virtual DOM)
虚拟DOM的诞生是基于:改变真实的DOM状态远比改变一个JS对象的花销要大的多。
虚拟DOM是一个映射真实DOM的JS对象,当有变化产生时,就会创建一个新的虚拟DOM对象,计算新旧Virtual DOM的差别,然后把这些差别应用在真实的DOM上。
虚拟DOM的本质是嵌套着数组的原生对象,当新一项被加进当前JavaScript对象时,一个函数会计算新旧Virtual DOM的差异且反应在真实的DOM上。高性能框架提供了计算这些差异的算法。(核心)
Vue在渲染过程中会跟踪每一个组件的依赖关系,不需要重新对整个组件树渲染,Vue默认进行了优化;
React每当应用的状态被改变时,全部子组件都会重新渲染,可以通过shouldComponentUpdate(一种生命周期方法)来进行控制,以避免不必要的渲染开销。
 
(2)可视化组件
组件化应用:把一个应用拆分成功能明确的模块,每个模块之间通过某种方式互相关联
(3)都提供了路由和状态管理模块
 
不同:
(1)模板与JSX
最大的区别是模板不同,Vue模板近似常规的HTML,使用HTML模板进行渲染,把html、css、js组合到一起,用各自的处理方式,提供了模板引擎处理
React推荐使用JSX--一种JS语法扩展(JS混杂着XML语法),使用编程思维书写模板,思路是all in js,用JS生成html,用JS操作css;JSX实际是React对HTML的封装
 
(2)对象属性 vs 状态管理
Vue中state不是必须存在的,数据由data属性在Vue对象中管理,data可以保存数据;vuex是大型复杂应用的状态管理方案;每一个 Vuex 应用的核心就是 store(仓库)。“store”基本上就是一个容器,它包含着你的应用中大部分的状态;
Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候,若 store 中的状态发生变化,那么相应的组件也会相应地得到高效更新。
 
React的state对象在应用中不可变,需要使用setState()方法更新;React中的Redux被设计为管理一个全局state对象/Flux
 
(3)React Native 与 WEEX
React Native能在手机上创建原生应用;
Vue后与阿里合作开发Weex;
 
(4)扩展
在路由库的问题上,React 选择把问题交给社区维护,因此创建了一个更分散的生态系统。但相对的,React 的生态系统相比 Vue 更加繁荣。
react中,需要引入react-router库,使用时,路由器Router就是React的一个组件。Router组件本身只是一个容器,真正的路由要通过Route组件定义,Route组件定义了URL路径与组件的对应关系。你可以同时使用多个Route组件。
 
Vue 的路由库和状态管理库都是由官方维护支持且与核心库同步更新的;使用 Vue.js ,我们已经可以通过组合组件来组成应用程序,当你要把 vue-router 添加进来,我们需要做的是,将组件(components)映射到路由(routes),然后告诉 vue-router 在哪里渲染它们。
 
 
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!