【Vue&React】Vue和React的区别

2021-03-31 127 阅读2分钟

Vue 和 React 的区别

一、相同点

都将注意力集中在核心库，而将其他功能如路由和全局状态管理交给相关库。
都有自己的构建工具。
都有props的概念，允许组件间的数据传递
都鼓励组件化的应用，将应用拆分成一个个功能明确的模块，提高复用性

二、不同点

数据流

Vue 默认支持数据的双向绑定

React 提倡单向数据流

虚拟DOM

Vue 在渲染过程中，会跟踪每一个组件的依赖关系，从而更快的计算出Virtual DOM 的差异，不需要重新渲染整个组件树

React 当应用的状态被改变时，全部子组件都会重新渲染。当然，这可以通过PureComponent/shouldComponentUpdate这个生命周期来进行控制优化。

组件化

Vue 中模板使用的数据必须在this上进行声明中转，所以import的组件需要在components中再次声明

React 中的render 函数支持闭包特性，import 的组件在render 函数中可以直接调用

模板编写

Vue 鼓励写近似常规HTML的模板，接近标准的HTML元素，只是多了一些属性

React 推荐使用JavaScript的语法扩展模板JSX语法

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

Vue 通过getter/setter以及一些函数的劫持，能精确知道数据的变化

React 通过比较引用的方式（diff）进行的

HoC和mixins

Vue 组合不同功能的方式是通过mixin实现

React 组合不同功能的方式是通过HoC（高阶组件）实现

组件通信的区别

Vue 三种方式实现组件间通信：父组件通过props向子组件传递数据；子组件通过事件向父组件发送消息；provide/inject实现父组件向子组件注入数据，可跨越多个层级

React 三种方式实现组件间通信：父组件通过props向子组件传递数据；子组件通过回调函数向父组件传递消息；context实现跨层级通信

  // provide/inject 是Vue提供的两个钩子，和data同级。书写形式和data一样
  // provide: 用来发送数据或方法
  // inject: 用来接收数据或方法
  // 父组件中：
  provide() {
    return {
      name: this.name
    }
  }

  -------------------------------------------------------------
  //子组件中：
  inject: ['name']

友情链接：