【Vue对比React框架------运行时性能、HTML & CSS、规模、原生渲染】

看了vue官网上的对比，做一个小笔记。虽说官网更偏向于vue，但这也正常，人家官方嘛

 正文：

对比react框架

运行时性能

在 React 应用中，当某个组件的状态发生变化时，它会以该组件为根，重新渲染整个组件子树。

如要避免不必要的子组件的重渲染，你需要在所有可能的地方使用 PureComponent，或是手动实现 shouldComponentUpdate 方法。同时你可能会需要使用不可变的数据结构来使得你的组件更容易被优化。然而，使用 PureComponent 和 shouldComponentUpdate 时，需要保证该组件的整个子树的渲染输出都是由该组件的 props 所决定的。如果不符合这个情况，那么此类优化就会导致难以察觉的渲染结果不一致。

在 Vue 应用中，组件的依赖是在渲染过程中自动追踪的，所以系统能精确知晓哪个组件确实需要被重渲染。可以理解为每一个组件都已经自动获得了 shouldComponentUpdate，并且没有上述的子树问题限制。 Vue 的这个特点使得开发者不再需要考虑此类优化，从而能够更好地专注于应用本身。

HTML & CSS

在 React 中，一切都是 JavaScript。不仅仅是 HTML 可以用 JSX 来表达，现在的潮流也越来越多地将 CSS 也纳入到 JavaScript 中来处理。

Vue 的整体思想是拥抱经典的 Web 技术，并在其上进行扩展。

JSX vs Templates

在 React 中，所有的组件的渲染功能都依靠 JSX。JSX 是使用 XML 语法编写 JavaScript 的一种语法糖。

使用 JSX 的渲染函数有下面这些优势：

• 你可以使用完整的编程语言 JavaScript 功能来构建你的视图页面。比如你可以使用临时变量、JS 自带的流程控制、以及直接引用当前 JS 作用域中的值等等。

• 开发工具对 JSX 的支持相比于现有可用的其他 Vue 模板还是比较先进的 (比如，linting、类型检查、编辑器的自动完成)。

Vue 模板：

• 对于很多习惯了 HTML 的开发者来说，模板比起 JSX 读写起来更自然。

• 基于 HTML 的模板使得将已有的应用逐步迁移到 Vue 更为容易。

• 这也使得设计师和新人开发者更容易理解和参与到项目中。

• 你甚至可以使用其他模板预处理器，比如 Pug 来书写 Vue 的模板。

组件作用域内的 CSS

CSS 作用域在 React 中是通过 CSS-in-JS 的方案实现的 (比如 styled-components和 emotion）。这引入了一个新的面向组件的样式范例，它和普通的 CSS 撰写过程是有区别的。

许多主流的 CSS-in-JS 库也都支持 Vue (比如 styled-components-vue 和 vue-emotion)。这里 React 和 Vue 主要的区别是，Vue 设置样式的默认方法是单文件组件里类似 style 的标签。单文件组件让你可以在同一个文件里完全控制 CSS，将其作为组件代码的一部分。ue 的单文件组件里的样式设置是非常灵活的。通过 vue-loader，你可以使用任意预处理器、后处理器，甚至深度集成 CSS Modules——全部都在 <style> 标签内。

规模

1.向上扩展

生态差异性

Vue 和 React 都提供了强大的路由来应对大型应用。React 社区在状态管理方面非常有创新精神 (比如 Flux、Redux)。Vue 更进一步地采用了这种模式 (Vuex)，更加深入集成 Vue 的状态管理解决方案。Vue 的路由库和状态管理库都是由官方维护支持且与核心库同步更新的。React 则是选择把这些问题交给社区维护，因此创建了一个更分散的生态系统。但相对的，React 的生态系统相比 Vue 更加繁荣。

不同的设计理念

Vue 提供了 CLI 脚手架，能让你通过交互式的脚手架引导非常容易地构建项目。你甚至可以使用它快速开发组件的原型。React 在这方面也提供了 create-react-app，但是现在还存在一些局限性：

• 它不允许在项目生成时进行任何配置，而 Vue CLI 运行于可升级的运行时依赖之上，该运行时可以通过插件进行扩展。

• 它只提供一个构建单页面应用的默认选项，而 Vue 提供了各种用途的模板。

• 它不能用用户自建的预设配置构建项目，这对企业环境下预先建立约定是特别有用的。

这些限制是故意设计的，这有它的优势。例如，如果你的项目需求非常简单，你就不需要自定义生成过程。

2.向下扩展

开始学 React 前，你需要知道 JSX 和 ES2015。需要学习构建系统，虽然你在技术上可以用 Babel 来实时编译代码，但是这并不推荐用于生产环境。

Vue 向下扩展后就类似于 jQuery。你只要把如下标签放到页面就可以运行：

<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>

然后你就可以编写 Vue 代码并应用到生产中，你只要用 min 版 Vue 文件替换掉就不用担心其他的性能问题。

由于起步阶段不需学 JSX，ES2015 以及构建系统，所以开发者只需不到一天的时间阅读指南就可以建立简单的应用程序。

原生渲染

React Native 能使你用相同的组件模型编写有本地渲染能力的 APP (iOS 和 Android)。能同时跨多平台开发，对开发者是非常棒的。

Weex 是阿里巴巴发起的跨平台用户界面开发框架，允许你使用 Vue 语法开发不仅仅可以运行在浏览器端，还能被用于开发 iOS 和 Android 上的原生应用的组件。

Weex 成熟度也不能和 React Native 相抗衡。另一个选择是 NativeScript-Vue，一个用 Vue.js 构建完全原生应用的 NativeScript 插件。