vue与react对比总结(一)
一、react和vue设计上的共同理念
1、使用 Virtual DOM
2、提供了响应式 (Reactive) 和组件化 (Composable) 的视图组件。
3、将注意力集中保持在核心库,而将其他功能如路由和全局状态管理交给相关的库(比如我们后面要提到的vue-router、react-router、vue、redux等)。
4、都拥有自己的脚手架,便于用户对于项目基础的搭建(vue-cli和create-react-app)
二、从设计理念上来讲的不同之处
1、React的是采用了函数式的编程思想、是单向数据流,而vue更偏重响应式、数据是可变的。
-
在react中,数据的流向是单向,也就是说,数据只会从父组件流向子组件。
react在经过setState对数据进行改变后,如果shouldComponentUpdate返回的是true,就继续渲染,如果返回了false,就不会重新渲染。而使用PureComponent就相当于是重写了shouldComponentUpdate,然后在里面作了props和state的浅层对比。
在这里的渲染,会以当前数据改变的组件为根节点,对该子树全部进行重新渲染。但是这个过程中,我们需要保证这颗子树是一个类似纯函数的概念,也就是说,所有的输出都由输入的props来决定,否则通过shouldComponentUpdate和PureComponent进行优化会导致组件有难以察觉的渲染结果不一致。
-
在vue中,组件的依赖是在渲染过程中自动追踪的。
也就是说,vue会对每一个属性都建立一个监听器,当被监听的属性发生变化时,vue会定位到数据发生变化的组件并且之重新渲染该节点,而不是重新渲染该子树,相当于vue自动为我们做了shouldComponentUpdate的优化。但是随之而来的,当vue中的state越来越多时,vue注册的监听器也越来越多,会导致些许的卡顿。
这也是为什么,我们在构建大型应用时,更偏重选择需要手动优化的react而不是自动优化的vue。但是当我们构建小型应用时,vue的优点是毋庸置疑的。
2、 React 中,所有的组件的渲染功能都依靠 JSX,而vue虽然也提供了函数渲染,但是我们还是更推荐使用模板进行书写
-
react中,所有组件的渲染都是依靠jsx进行的,而jsx的本质是使用 XML 语法编写 JavaScript 的一种语法糖。而他的优点也是显而易见的。
你可以使用完整的编程语言 JavaScript 功能来构建你的视图页面。比如你可以使用临时变量、JS 自带的流程控制、以及直接引用当前 JS 作用域中的值等等。
开发工具对 JSX 的支持相比于现有可用的其他 Vue 模板还是比较先进的 (比如,linting、类型检查、编辑器的自动完成)。
-
在vue中,任何合乎html规范的都是合法的vue模板
事实上vue也提供了渲染函数,但是在vue api设计的基础上,模板可以更好地契合vue的各种修饰符,以此可以用更少的代码来实现和jsx相同的功能。
同时模板的易于读懂以及便于迁移的特点,也更加契合用户的使用习惯。
三、从二者的生态圈来看
1、Vue 的路由库和状态管理库都是由官方维护支持且与核心库同步更新的。React 则是选择把这些问题交给社区维护,因此创建了一个更分散的生态系统。但相对的,React 的生态系统相比 Vue 更加繁荣。
2、虽然vue和react都提供了脚手架以便于开发者快速搭建项目,但是create-react-app相比较vue-cli有更多的局限性。
3、React 学习曲线陡峭,在你开始学 React 前需要预先对jsx以及es6进行一定程度的了解,在这个基础上才能更好的学习react和构建react系统;而vue可能只需要在你了解了vue的文档之后,就可以着手进行项目的开发。
后续会继续升入细化进行两个框架的各方面对比,包括从api和技术选型两个角度来做一个详细的解读