Vue与React区别与优缺点

一、区别: 

1. 语法

Vue采用自己特有的模板语法

React是单向的,采用jsx语法创建react元素。

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

Vue2.0 通过Object.defineproperty()方法的getter/setter属性, 实现数据劫持, 每次修改完数据会触发diff算法(双端对比)

React默认是通过shouldComponentUpdata生命周期来决定是否需要渲染更新, 再触发它的diff算法(比较引用)如果不优化可能导致大量不必要的VDOM的重新渲染。

为什么React不精确监听数据变化呢?这是因为Vue和React设计理念上的区别,Vue使用的是可变数据,而React更强调数据的不可变,两者没有好坏之分,Vue更加简单,而React构建大型应用的时候更好。

3.数据绑定(原理)

Vue是双向绑定的,它最核心的功能有2个: 1. 响应式的数据绑定系统; 2. 组件系统

所谓双向绑定,指的是vue实例中的data与其渲染的DOM元素的内容保持一致,无论谁被改变,另一方会相应的更新为相同的数据。这是通过设置属性访问器实现的。

vue的依赖追踪是通过 Object.defineProperty 把data对象的属性全部转为 getter/setter来实现的;

当改变数据的某个属性值时,会触发set函数,获取该属性值的时候会触发get函数,通过这个特性来实现改变数据时改变视图;

也就是说只有当数据改变时才会触发视图的改变,反过来在操作视图时,只能通过DOM事件来改变数据,再由此来改变视图,以此来实现双向绑定

双向绑定是在同一个组件内,将数据和视图绑定起来,和父子组件之间的通信并无什么关联;

组件之间的通信采用单向数据流是为了组件间更好的解耦,在开发中可能有多个子组件依赖于父组件的某个数据,假如子组件可以修改父组件数据的话,一个子组件变化会引发所有依赖这个数据的子组件发生变化,所以vue不推荐子组件修改父组件的数据,直接修改props会抛出警告

思想是响应式的,也就是基于是数据可变的,通过对每一个属性建立Watcher来监听, 当属性变化的时候,响应式的更新对应的虚拟dom。

React单向数据流;

react中通过将state(Model层)与View层数据进行双向绑定达数据的实时更新变化,

具体来说就是在View层直接写JS代码Model层中的数据拿过来渲染,一旦像表单操作、触发事件、ajax请求等触发数据变化,则进行双同步。

推崇结合immutable来实现数据不可变。

react在setState之后会重新走渲染的流程,如果shouldComponentUpdate返回的是true,就继续渲染, 如果返回了false,就不会重新渲染,PureComponent就是重写了shouldComponentUpdate,然后在里面作了props和state的浅层对比;

4. 组件间通信

组件的通信场景无外乎以下几种:

  • 父子之间
  • 兄弟之间
  • 多层级之间(孙子祖父或者更多)
  • 任意组件之间

父子组件之间的通信: 

Vue是基于单项数据流设计的框架,但是提供了一些的语法,指令去实现一些操作

  • 父->子:通过props进行传递数据给子组件
  • 子->父:通过emit向父组件传值

同时,还有一些其他进行父子组件通信的方式,通过$parent和$children获取组件的父或者子组件的实例,之后通过实例对象去修改组件的属性。在表单控件中,使用v-model实现了双向数据绑定,其实这里v-model是一个语法糖 ( 实现v-model的原理在下面 ),内部实现还是监听了表单控件的change事件,然后将数据传递给组件修改数据,从而实现了双向数据绑定。

React

  • 父->子:通过props将数据传递给子组件
  • 子->父:通过父组件向子组件传递函数,然后子组件中调用这些函数,利用回调函数实现数据传递

兄弟组件之间的通信:

Vue中,可以通过查找父组件下的子组件实例,然后进行组件进行通信。如this.$parent.$children,在$children中,可以通过组件的name找到要通信的组件,进而进行通信。

React中,需要现将数据传递给父组件,然后父组件再传递给兄弟组件。

多层级组件之间的通信:

在多层级的组件中,当然可以通过不断的获取$parent找到需要传递的祖先级组件,然后进行通信,但是这样繁琐易错,并不推荐。Vue在2.2.0 新增提供了provide/inject的方式进行传递数据。即在祖先组件提供数据,在需要使用的组件中,注入数据,这样就可以在子组件中使用数据了。

// 父级组件提供 'foo'
var Provider = {
 provide: {
  foo: 'bar'
 },
 // ...
}
 
// 子组件注入 'foo'
var Child = {
 inject: ['foo'],
 created () {
  console.log(this.foo) // => "bar"
 }
 // ...
}

React

在React中,提供了一个和Vue类似的处理多层级组件通信的方式——context,这里会提供一个生产者和一个消费者,会在父组件中生产数据,在子组件中消费数据。从使用上来说,只需要将子组件包裹在生产者的Provider中,在需要用到数据的子组件中,通过Consumer包裹,就可以拿到生产者的数据。

// Theme context, default to light theme
const ThemeContext = React.createContext('light');
 
class App extends React.Component {
 render() {
  const {signedInUser, theme} = this.props;
 
  // App component that provides initial context values
  return (
   
    
   
  );
 }
}
 
function Layout() {
 return (
  
); } // A component may consume multiple contexts function Content() { return ( {theme => ( )} ); }

二、优缺点(待整理)

Vue:

简单、快速、强大、对模块友好,但不支持IE8。

1. 简单:官方文档很清晰,比 Angular 简单易学。

2. 快速:异步批处理方式更新 DOM。

3. 组合:用解耦的、可复用的组件组合你的应用程序。

4. 紧凑:~18kb min+gzip,且无依赖。

5. 强大:表达式 & 无需声明依赖的可推导属性 (computed properties)。

6. 对模块友好:可以通过 NPM、Bower 或 Duo 安装,不强迫你所有的代码都遵循 Angular 的各种规定,使用场景更加灵活。

React

速度快、跨浏览器兼容、模块化;

但学习曲线陡峭,需要深入的知识来构建应用程序。

1. 速度快:在UI渲染过程中,React通过在虚拟DOM中的微操作来实现对实际DOM的局部更新。

2. 跨浏览器兼容:虚拟DOM帮助我们解决了跨浏览器问题,它为我们提供了标准化的API,甚至在IE8中都是没问题的。

3. 模块化:为你程序编写独立的模块化UI组件,这样当某个或某些组件出现问题是,可以方便地进行隔离。

4. 单向数据流:Flux是一个用于在JavaScript应用中创建单向数据层的架构,它随着React视图库的开发而被Facebook概念化。

5. 同构、纯粹的javascript:因为搜索引擎的爬虫程序依赖的是服务端响应而不是JavaScript的执行,预渲染你的应用有助于搜索引擎优化。

6. 兼容性好:比如使用RequireJS来加载和打包,而Browserify和Webpack适用于构建大型应用。它们使得那些艰难的任务不再让人望而生畏。

React本身只是一个V而已,并不是一个完整的框架,所以如果是大型项目想要一套完整的框架的话,基本都需要加上ReactRouterFlux才能写大型应用。

陡峭的学习曲线:由于复杂的设置过程,属性,功能和结构,它需要深入的知识来构建应用程序。

react更适合构建大型应用, 为什么呢?

1. 通过 React 构建组件,使得代码更加容易得到复用,能够很好的应用在大项目的开发中。

你可能感兴趣的:(react,Vue,vue.js,react.js,javascript,前端)