上周， React 工程项目组已经开始预览 React 文件格式。前夕，Vue.js 译者尤雨溪正式发布twitter称，捷伊 React 文件格式假如向新手所推荐 Vite 而并非 CRA——或是假如须要采用 ESLint 或试验，最少也该所推荐两个如前所述 Vite 的自订模版（也假如采用 Vitest 而并非 Jest）。
Vite 是两个通用型的构筑辅助工具，意在为 VanillaJS、Vue、React 和 Svelte 等当代 Web 工程项目提供更多更慢、更简化的合作开发新体验，它不倚赖任何人某一的架构。更为重要的是，Vite 由 Vue 合作开发工程项目组合作开发，尤雨溪也是 Vite 的核心理念合作开发人员。
尤雨溪正式发布这种的文本引发了合作开发人员的探讨。
有合作开发人员回帖称：React 紧紧围绕另一方面建立了她们的辅助工具（jest、CRA、试验库）。很多工程项目仍在采用它。所推荐服务器端辅助工具没任何人象征意义（无论与否为的是新手），不论其它看上去多好，都要保护她们的辅助工具。
尤雨溪澄清称：React 工程项目组没建立 Jest/testing -library，也没保护它。CRA 在某种意义上是第三方的，但除非舍弃它，她们可以为使用者提供更多更快的 DX 并增加她们的保护经济负担。
直面合作开发人员对 Vite 的批评，尤雨溪则表示，“我不指出 Vite 的等级太低，它提供更多了基本上 CRA 提供更多的大部份实用性。”尤雨溪还补足道，“我总之有偏见，但我很想晓得与否有任何人的理据来秉持采用 CRA。”
三大非主流框架争夺战
做为 Web 后端的三大非主流架构，React 和 Vue 间市场竞争格外激烈，双方“战争”持续多年，分别拥有她们的坚定支持者。
React 起源于 Meta（前 Facebook）的内部工程项目，当时公司对市场上大部份 JavaScript MVC 架构都不满意，便决定自行合作开发。2011 年，Facebook 首次将 React 部署在 News Feed 上，随后在 2012 年部署到了 Instagram 上。2013 年 5 月，Facebook 宣布将工程项目开源。
目前，React 是很多大公司的首选，像 Atlassian (Jira, Trello)、Codecademy、Dropbox、Netflix、Airbnb、Twitter、Reddit 和阿里都采用的是 React。React 虽然一直被视为架构，但同样适合构筑 Web 应用程序的整个视图。
而 Vue 最早是在 2014 年 2 月正式发布。尤雨溪则表示，Vue 提取了 Angular 中她们喜欢的部分，然后构筑出了这款相当轻量的架构。最早的版本正式发布在 Hacker News、Echo JS 与 Reddit 的 /r/javascript 版块，一天之内就登上了这三个网站的首页。现在，Vue 也是 Github 上最受欢迎的开源工程项目之一。
根据尤雨溪的说法，Vue 的主要使用者是中小型企业、自由职业合作开发人员和小型 agency。现在采用 Vue 的企业包括 Behance、Dribbble、Adobe、GitLab、Namecheap、Grammarly、任天堂、Zoom、Louis Vuitton、Google Careers 等。
这并非尤雨溪第三次公开评价 React。
今年 5 月，React 核心理念工程项目组成员 Dan Abramov 在twitter上正式发布了 React 新文件格式，有网民赞扬该文件格式在结构、美观和性能等方面都达到了非常高的标准。但尤雨溪则表示，在对 Vue 新文件格式和 React Beta 文件格式分别做了试验后指出，Vue 新文件格式在性能方面更有优势。
对此，Dan Abramov 则表示，文件格式还处于 Beta 版本，正式版上线前会优化性能。然而有网民发现，Dan Abramov 在 5 月 26 日晚上熬夜对 React 新文件格式的性能做了优化。React 与 Vue 的市场竞争可见一斑。
到底用哪个？
业内对“React 和 Vue 到底谁更厉害”、“React 和 Vue 选谁”的探讨从未停止。合作开发人员 Oleg Goncharenko 从 React 与 Vue.js 如何建立组件、各组件间如何相互通信，以及组件如何影响浏览器 DOM 三个方面做了分析。
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 的方法。运作原理如下：
在网络浏览器加载网页之前，React 会制作一份 DOM 副本，并把大部份对象都放进两个新组件内。当使用者打开网页时，React 访问的并非实际 DOM，而是渲染 DOM 的副本——也就是虚拟 DOM。当使用者浏览页面的同时，React 也在计算其中大部份变更。假如使用者点击了某个按钮或执行了其它操作，React 就会建立一份捷伊 DOM 快照，再将其与之前的版本进行比较。假如再有其它节点元素发生了变化，React 就会预览页面以渲染实际 DOM。而 Vue.js 没用 React 的虚拟 DOM 思想，处理方式也有所区别。尤雨溪对此曾评价道：在大多数情况下，这种方式确实资源成本低廉、速度更慢。但是，假如须要重新建立大量 JS 对象，那操作成本仍然很高。虚拟 DOM 最大的问题是，不论模版中的动态文本是多还是少，总是须要遍历整个树才能弄清到底发生了哪些变化。
因此，Vue.js 现在只跟踪 DOM 树中每个对象之内的依赖项。Vue 3.0.11 中的虚拟 DOM 只跟踪动态元素，也就是包含<p v-if=”ok”>的部分。
遍历 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：
以 Web 类产品为核心理念的企业。希望在合作开发过程中实施单一流程的企业。缺乏在构筑过程中采用架构的经验，或希望充分利用原有 JS 合作开发人才的企业。参考链接：
https://brocoders.com/blog/react-vs-vue-comparison-2021/
