react和vue的区别 应用场景

目录:

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

2. 数据流的不同

3. HoC和mixins

4. 组件通信的区别

5. 模板渲染方式的不同

6. 渲染过程不同

7. 框架本质不同

8. 开发过程中

9. 开发应用时

应用场景:

react 和 vue 是我们做前端中必不可少的,一般看公司都在使用什么,你就要用什么,一般规模大的公司都会使用react+ts/react+hook,小公司使用vue2.0多一点,但不是全方面的,那么我们来说说react和vue有什么区别:

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

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

React默认是通过比较引用的方式(diff)进行的,如果不优化可能导致大量不必要的 VDOM的重新渲染

2. 数据流的不同

Vue1.0中可以实现两种双向绑定:父子组件之间,props可以双向绑定;组件与DOM 之间可以通过v-model双 向绑定

React一直不支持双向绑定,提倡的是单向数据流,称之为onChange/setState()模式

3. HoC和mixins

Vue组合不同功能的方式是通过mixin,Vue中组件是一个被包装的函数,并不简单的就是我们定义组件的时候传 入的对象或者函数

React组合不同功能的方式是通过HoC(高阶组件)

4. 组件通信的区别

React 本身并不支持自定义事件,而Vue中子组件向父组件传递消息有两种方式:事件和回调函数,但Vue更倾 向于使用事件

在React中我们都是使用回调函数的,这可能是他们二者最大的区别

5. 模板渲染方式的不同

在表层上,模板的语法不同,React是通过JSX渲染模板;而Vue是通过一种拓展的HTML语法进行渲染

模板的原理不同,React是在组件JS代码中,通过原生JS实现模板中的常见语法,比如插值,条件,循环等,都 是通过JS语法实现的,更加纯粹更加原生。而Vue是在和组件JS代码分离的单独的模板中,通过指令来实现的

6. 渲染过程不同

Vue可以更快地计算出Virtual DOM的差异,这是由于它在渲染过程中,会跟踪每一个组件的依赖关系,不需要 重新渲染整个组件树

React在应用的状态被改变时,全部子组件都会重新渲染。通过shouldComponentUpdate这个生命周期方法可 以进行控制,但Vue将此视为默认的优化

7. 框架本质不同

Vue本质是MVVM框架,由MVC发展而来

 React是前端组件化框架,由后端组件化发展而来

8. 开发过程中

vue适合开发小型应用

react适合开发大型应用

9. 开发应用时

vue使用uni-app开发app

react使用 react-Native

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