2016年,React在Web端和移动端都实现了迅速的成长,稳稳地领先于其主要竞争对手Augular,巩固了其作为前端框架之王的地位。Vue.js 2.0 的发布在整个JavaScript社区都引起了巨大反响,这一点仅从它在Github中涨了25,000颗star,就足以得到证明。
一、相似之处
React 和 Vue 有许多相似之处,它们都有:
1.使用 Virtual DOM
2.基于组件化的轻量级框架,提供了响应式(Reactive)和组件化(Composable)的视图组件。
3.专注于构建用户界面的视图层。
3.将注意力集中保持在核心库,有配套的路由和负责处理全局状态管理的库,都既可以用于简单的项目,也适用于使用前沿技术的大规模复杂项目。
更新性能。
二、渲染性能方面
React中,当某个组件状态发生变化时,会从根组件开始触发整个组件树的重新渲染。为了避免不必要的子组件重渲染,在react中需要频繁使用shouldComponentUpdate和不可变的数据数据结构。而Vue组件在渲染到web期间,它依赖是自动追踪的,所以系统可以精确地知道是哪个组件需要重渲染。由于 Vue 改进过渲染性能,未经优化的 Vue 相比未经优化的 React 要快的多,甚至全面优化过的 React 通常也会慢于开箱即用的 Vue。
三、JSX 和 Templates
Vue应用的默认选项是把markup放入HTML文件中。数据绑定表达式使用的是与Angular相似的双大括号(moustache)语法,而指令(特殊的HTML属性)则用于向模板中添加功能。
在 React 中,所有的组件的渲染功能都依靠 JSX。JSX 的渲染功能有下面这些优势:
1.你可以使用完整的编程语言 JavaScript 功能来构建你的视图页面。
2.工具对 JSX 的支持相比于现有可用的其他 Vue 模板还是比较先进的(比如,linting、类型检查、编辑器的自动完成)。
在 Vue 中,由于有时需要用这些功能,也提供了渲染功能并且支持了 JSX。然而,对于大多数组件来说,渲染功能是不推荐使用了,而是使用更简单的模板。
优点如下:
在写模板的过程中,样式风格已定并涉及更少的功能实现。
模板总是会被声明的。
模板中任何 HTML 语法都是有效的。
阅读起来更贴合英语(比如,for each item in items)。
不需要高级版本的 JavaScript 语法,来增加可读性。
小结:
对于来自标准Web开发的新开发者来说,模板更容易理解,模板能更好地把功能和布局分割开来。不过使用模板的代价在于你需要学习所有的HTML扩展语法,而渲染函数(render function)只要求会使用标准的HTML和JavaScript。
四、CSS 的组件作用域
Vue 可以让你在每个单文件组件中完全访问 CSS。这个可选scoped属性会自动添加一个唯一的属性为组件内 CSS 指定作用域。
五、Vue强大的扩展规模
1.向上扩展
Vue 和 React 都提供了强大的路由来应对大型应用。React在状态管理方面使用Flux、Redux,Vue 的状态管理解决方案 Vuex。Vue 的路由库和状态管理库都是由官方维护支持且与核心库同步更新的。React 则是选择把这些问题交给社区维护,因此创建了一个更分散的生态系统。
Vue 提供了Vue-cli 脚手架,能让你非常容易地构建项目,包含了Webpack,Browserify,React 在这方面也提供了create-react-app。
2.向下扩展
Vue 向上扩展好比 React 一样,Vue 向下扩展后就类似于 jQuery。你只要把如下标签放到页面就可以运行:
六、选择Vue还是React
1.简单和“能用就行”,Vue
一个简单的Vue项目能不需要转译直接使用在浏览器中,这使得在项目中使用Vue可以像使用jQuery一样容易。但典型的React代码是更多地依赖于JSX和诸如class等ES6特性的。比较一下这两个框架是如何处理应用数据的(即“state”):
React里的状态(state)是不可变(immutable)的,因此你不能直接地改变它,而是要用setState API方法:
this.setState({
message: this.state.message.split('').reverse().join('')
});
React是通过比较当前状态和前一个状态的区别来决定何时及如何重新渲染DOM的内容,因此需要使用不可变的状态。
而与此相反的是,Vue中的数据是可变的(mutated),所以同样的数据变量可以用简洁得多的方式修改:
this.message = this.message.split('').reverse().join('');
Vue的状态进行管理:
当向状态中添加一个新对象时,Vue将遍历其中的所有属性并且将它们转换为getter,setter方法。于是Vue的响应系统开始保持对该状态的跟踪,当该状态的内容发生变化的时候就会自动重新渲染DOM。令人佩服的是,Vue中改变状态的操作不仅更加简洁,而且它的重新渲染系统实际上比React的更快更高效。
不过Vue的响应系统还是有些坑的,比如它无法检测属性的添加和删除,以及某些数组更改。这时候就要用Vue API中的类似于React的set方法的措施来解决。
2.应用需要尽可能的小和快,Vue
Vue的渲染系统比React的更快,测试方法是将含有10000个项目的列表渲染100次
页面大小方面,Vue目前的版本压缩后只有25.6KB。要用React实现同样的功能,你需要React DOM(37.4KB)和React with Addon库(11.4KB),共计44.8KB,几乎是Vue的两倍大。
3.构建一个大型应用程序,React
模板容易出现难以注意到的运行时错误,同时也不易于测试,重构和分解。相比之下,Javascript模板可以组织成经过良好分解,且使用DRY(don't repeat yourself - 避免重复代码)原则的代码的组件,因而具有更强的可重用性和可测试性。
4.同时适用于Web端和原生App的框架,React
React Native是一个用于通过Javascript构建移动端原生应用程序的库。 它与React.js相同,只是不使用Web组件,而是使用原生组件。 如果你学过React.js,很快就能上手React Native,反之亦然。开发者只需要一套知识和工具就能开发Web应用和移动端原生应用。如果你想同时做Web端开发和移动端开发,学习React对你来说是相当划算的。
5.最大的生态圈,请使用React
React目前比Vue要受欢迎许多——它在NPM上每个月的下载量约为250万次,而Vue只有22.5万次。
人气带来的好处不仅是表面上的名声,还意味着更多相关的技术文章,教程和更多Stack Overflow上的解答和帮助;以及有着更多的工具和插件可以在项目中使用,开发者不用从零开始,可以省很多力气。
React诞生于Facebook,自带给力的资助,它的开发者和Facebook都承诺会持续维护React。而Vue则是由独立开发者尤雨溪创造,目前也只有他一名全职维护者。虽然也有一些公司资助Vue,但是规模和Facebook和Google没得比。
Vue有着固定的发布周期,甚至更令人称道的是,Github上Vue只有54个待解决问题(open issue),已关闭问题(closed issue)则有3456个;与之相比,React的已关闭问题数目相差不多(3447个),待解决问题却有多达530个。