Vue和React对比

creating-J

已于 2022-07-14 09:36:12 修改

阅读量224

点赞数

分类专栏：前端知识积累文章标签： vue.js react.js javascript

于 2022-07-12 10:26:31 首次发布

本文链接：https://blog.csdn.net/cratingJ/article/details/125737695

版权

前端知识积累专栏收录该内容

24 篇文章 0 订阅

订阅专栏

React 与 Vue.js 中的组件构建原则

组件的作用是在网络浏览器上呈现数据，包括向用户展示的ui部分（html）与逻辑部分（js）。这里的逻辑，负责描述浏览器中所传递数据的功能和方法。
React使用JavaScript Syntax Extension (JSX)，这种语法语言有助于编写出与浏览器内本地方法相对应的函数。Safari、Chrome 和 Firefox 都基于 JS 引擎，所以可以直接与由 React 编写的逻辑函数对话。但由于 JS 代码中还包含大量 HTML 标记，网络浏览器无法直接识别。因此，React 需要使用 Babel Transpiler 将代码转换为纯 JS。
JSX 允许在 JS 当中返回 HTML 或者在 HTML 中执行。而 JS 变量则可以用 HTML 标记进行分配，具体如下所示：

const message = <h1>React is cool!</h1>

动态变量可以被放在JSX中的括号语法( { … } )内。
根据Stackshare的统计数据，React最受欢迎的特性一是组件（747票），二是便捷性（484票）。但JSX获得的支持则非常有限，仅得到31票。
JSX最大的问题在于它不要求特定的代码结构，所以组件逻辑和UI都存放在单一文件内，很可能导致代码混乱。
这种将组件存放进单一文件的思路跟Angular正好相反，后者要求将HTML、JS和CSS分别保存在不同的文件内。除非Airbnb和Netflix加入React社区，并使用React构建自己的MVP（最小可行产品），否则这种单文件组件实现形式肯定无法成为主流。
与React一样，Vue.js也推荐将 UI 和逻辑保存在同一文件中。Vue.js 中的组件代码则被包含在特定的HTML模板之内。模板的存在为组件代码勾勒出了清晰的轮廓。程序员可以借此观察方法、属性和渲染函数。
另外，Vue.js有自己的特定语法，使用双括号{{ }}作为数据占位符。HTML属性则是VUe.js中的指令，包含前缀v-。同时，Vue.js还支持用JSX进行编码，这也扩展了框架自身的编程能力。
总的来说，React 要求开发者拥有扎实的JS技能，而 Vue.js 对新手开发者更加友好。与React类似，Vue.js也支持使用JSX编写，但其组件是用HTML模板编写而成。

组件如何影响浏览器 DOM

当用户打开网页时，网络浏览器会将其解析为树状结构，并自上而下进行读取，这种树状结构文件被称为文档对象模型（DOM）。如果用户在页面上执行了某些操作，浏览器就需要重新创建页面并读取 DOM。这就会带来更多负载，并占用掉浏览器资源。
React 避免了传统 DOM 渲染，转而利用浏览器内的数据渲染能力。React 设计了一种把内容渲染到虚拟 DOM 的方法。运作原理如下：
1、在网络浏览器加载网页之前，React会制作一份DOM副本，并把所有对象都放进一个新组件内。
2、当用户打开网页时，React访问的不是实际DOM，而是渲染DOM的副本——也就是虚拟DOM。
3、当用户浏览页面的同时，React也在计算其中所有变更。如果用户点击了某个按钮或执行了其他操作，React就会创建一份新的DOM快照，再将其与之前的版本进行比较。
如果再有其他节点元素发生了变化，React就会更新页面以渲染实际DOM。
而 Vue.js 没用 React 的虚拟 DOM 思想，处理方式也有所区别。尤雨溪对此曾评价道：在大多数情况下，这种方式确实资源成本低廉、速度更快。但是，如果需要重新创建大量 JS 对象，那操作成本仍然很高。虚拟 DOM 最大的问题是，无论模板中的动态内容是多还是少，总是需要遍历整个树才能弄清到底发生了哪些变化。
因此，Vue.js 现在只跟踪 DOM 树中每个对象之内的依赖项。Vue 3.0.11 中的虚拟 DOM 只跟踪动态元素，也就是包含的部分。遍历 DOM 树内节点确实非常耗时，因此 Vue 做出了技术调整。但自从 16.0 版本开始，React 团队已经完全重写了工具包核心，改进了渲染算法，也即现在的 React Fiber。
React 将函数分为影响浏览器 DOM 的函数，以及与 props、state 更新相关的函数。组件更新被归入“functions”类别，而生命周期方法和 DOM 变更则被归入“side-effects”。这样程序员就可以优先考虑渲染工作。为了让动画能够平滑过渡，生命周期操作等更为耗时的工作可以先行延后，同时也可以将高优先级任务安排到同一队列内，之后再拆分成多个更小的任务或者增量。
由于工作单元，即 fiber nodes 的存在，上述解决方案也就有了实现的可能。每个 fiber 对应渲染流程中的特定步骤。它提出数据的线性表示，而非树状结构。这样尤雨溪提出的时间损失问题也就迎刃而解了。
React 因 Fiber 得到改进，也吸引到更多初创公司。当初使用 Vue.js 的阿里如今也选择了 React。此处，总结下 React 和 Vue.js 在虚拟 DOM 处理方法上的不同：
- Vue.js中的模板机制可将组件表示为迷你DOM。Vue.js并非跟踪每个对象，而是遍历模板中的动态部分，因此能够充分优化虚拟DOM操作，并充分利用Vue.js项目中的客户端渲染。
- React利用Fiber技术，可以跳过或推迟较为耗时的任务以提升程序性能。如此一来，开发人员就能在动画过渡期间控制渲染过程、调整性能水平。

组件数据绑定

在数字绑定方面，大家往往持不同观点。有些人说 React 只支持单向数据流，Vue.js 只提供 Angular 那样的双向绑定，其实并不是这样。React 和 Vue.js 都支持单向和双向数据流，而且也都优先推荐使用单向数据流。
React 支持回调函数，因此子组件可以将 props 传递给相应的父组件。例如当用户在子组件的输入字段内键入文本，这些变更也将被反映至父组件并执行内容更新。React 社区还提供 react-hook 库，专门用于实现双向数据绑定。
Vue 3.0.11 版本的说明文档也解释了其单向数据绑定的优势：所有 props 在子属性与父属性之间形成一个单向向下绑定。当父属性更新时，就会下流至子属性，但子属性更新不会上流至父属性。这样可以防止子组件意外改变父组件状态，避免提高应用程序数据流的理解难度。
此外，每当父组件更新时，子组件内的所有 props 都会被刷新为最新值。因此开发者不应尝试改变子组件内的 prop。在检测到这类操作时，Vue 会在控制台内发出警告。

总结

总的来说，React 的优势在于客户端渲染极快、对数据流的良好控制、具有轻量级架构，可扩展性与可伸缩性好，并拥有大型社区支持。但是，React 在缺少 Redux、routing 等库和服务的情况下无法运行、无结构代码极易陷入混乱。同时学习曲线较为陡峭，要求开发人员对 JS 拥有深入了解，并具有单页应用程序（SPA）设计经验。另外，更多的选项也对应着一定的实施成本。
因此，以下类型的企业可能更适合使用 React：

需要在市场上快速开发功能并验证项目的早期初创企业。
寻求外包开发的企业。与Vue.js相比，React专业开发人员的劳动力供应更为充足。
基于产品且需要跨平台应用开发的企业（强烈推荐基于React技术的React Native）。

Vue.js 将 React 与 Angular 的优势属性结合为一，最大的亮点就是完美的用户体验。此外，它还提供虚拟 DOM 功能和经过优化的代码结构。Vue.js 对开发者友好，有精细的用户文档。但 Vue.js 较难获得经验丰富的开发人才，社区规模相比之下不如 React。
因此，以下类型的企业可能更适合使用 Vue.js：