Vue2.x 与 React 的异同

284 阅读2分钟

一、相似之处

  • 都将注意力集中保持在核心库,而将其他功能如路由、全局状态管理交给相关的库。
  • 都有自己的构建工具,能让你得到一个根据最佳实践设置的项目模版。
  • 都使用了 Virtual DOM(虚拟DOM)提高重绘性能。
  • 都有 props 的概念,允许组件间的数据传递。
  • 都鼓励组件化应用,将应用分拆成一个个功能明确的模块,提高复用性。

二、不同之处

1. 数据流

Vue 默认支持数据双向绑定,而 React 一直提倡单向数据流。

2. 虚拟 DOM

Vue2.x 开始引入 Virtual DOM,消除了和 React 在这方面的差异,但是在具体的细节还是有各自的特点。

  • Vue 宣称可以更快的计算出 Virtual DOM 的差异,这是由于它在渲染过程中,会跟踪每一个组件的依赖关系,不需要重新渲染整个组件树。
  • 对于 React 而言,每当应用的状态被改变时,全部子组件都会重新渲染。当然,这可以通过 PureComponent/shouldComponentUpdate 这个生命周期来进行控制,但 Vue 将此视为默认的优化。

3. 组件化

Vue 和 React 最大的不同是模版的编写。

Vue 鼓励你去写近似常规 HTML 的模版,写起来很接近标准 HTML 元素,只是多了一些属性。React 则推荐你所有的模版都使用 JavaScript 的语法扩展 -- JSX 书写。

具体来讲:

Vue 中,由于模版使用的数据都必须挂在 this 上进行一次中转,所以我们 import 一个组件后,还需要在 components 中再声明一下。而 React 中 render 函数是支持闭包特性的,所以我们 import 的组件在 render 中可以直接调用。

4. 监听数据变化的实现原理不同

  • Vue 通过 getter/setter 以及一些函数的挟持,能精确知道数据变化,不需要特别的优化就能达到很好的性能。
  • React 默认是通过比较引用的方式进行的,如果不优化 PureComponent/shouldComponentUpdate 可能会导致大量不必要的 VDOM 的重新渲染,这是因为Vue 使用的是可变数据,而 React 更强调数据的不可变。

5. 高阶组件

Vue 需要通过 mixins 来扩展,而 React 可以通过高阶组件(Higher order Components--HOC)来扩展。

原因是因为高阶组件实际上就是高阶函数,而 React 的组件本身就是存粹的函数,所以高阶函数对 React 来说易如反掌。相反 Vue 使用 HTML 模版来创建视图组件,这是模版无法有效的编译,因此 Vue 不采用 HOC 来实现。

6. 构建工具

  • Vue ==> Vue-cli
  • React ==> Create React APP

7. 跨平台

  • Vue ==> Weex
  • React ==> React Native