• 技术文章 >web前端 >前端问答

    vue框架和react框架的区别是什么

    青灯夜游青灯夜游2020-11-19 16:03:20原创234

    区别:1、vue中的数据由data属性在Vue对象中进行管理,react中的数据由state属性管理;2、vue通过slot插槽进行嵌套传递,react通过“props.children”的方式将标签内的部分传递给子组件。

    一、Vue和React框架的不同点

    模板和jsx、状态管理、组件嵌套条件渲染、列表渲染、组件间的通信传值、路由管理

    1、模板和jsx

    vue:Vue.js 把html,css,js组合到一起,用各自的处理方式,使用了基于 HTML 的模版语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。

    1.png

    react:HTML 语言直接写在 JavaScript 语言之中,不加任何引号,简单说这就是 JSX 的语法,它允许 HTML 与 JavaScript 的混写。

    2.jpg

    2、状态管理

    vue:数据由data属性在Vue对象中进行管理。

    react:数据由state属性管理,但不能直接改变state的状态,需要通过setState()去更新。

    3.jpg

    3、组件嵌套

    vue:通过slot插槽进行嵌套传递

    父组件嵌套子组件wrap

    4.jpg

    子组件wrap

    5.jpg

    渲染结果

    6.jpg

    react:通过props.children的方式将标签内的部分传递给子组件

    父组件嵌套子组件wrap

    7.jpg

    子组件wrap

    8.jpg

    4、条件渲染和列表渲染

    vue条件渲染:v-if、v-show条件渲染一组数。
    vue列表渲染:v-for一组数进行列表渲染。

    9.jpg

    react条件渲染:使用逻辑运算&& || 、三目运算符来创建表示当前状态的元素。
    react列表渲染:通过使用{}在JSX内构建一个元素集合,使用map()方法循遍历数组。

    10.png

    5、组件间的通信传值

    vue:
    父传子:通过父组件绑定自定义属性(或通过v-bind绑定动态属性),子组件使用 props 选项时显式的声明props,以便它可以从父组件接收到期望的数据。
    子传父:通过父组件绑定自定义事件,子组件通过this.emit('自定义事件',value)传值。
    非父子:可以使用一个空的 Vue 实例绑定在Vue实例的原型上作为一个事件总线中心(vue.prototype.eventBus = new Vue()),用emit触发事件,on监听事件。

    父组件one

    11.png

    子组件one-one

    12.png

    react:
    父传子:通props属性进行传递。
    子传父:父组件定义事件,子组件触发父组件中的事件时,通过实参的形式来改变父组件中的数据来通信。
    非父子:嵌套不深的非父子组件可以使共同父组件,嵌套的深可以用redux共享状态。

    父组件

    13.png

    子组件

    14.png

    6、路由管理

    vue-router是全局配置方式,vue-router任何路由组件都会被渲染到<router-view/>位置。

    15.png

    16.png

    react-router是全局组件方式,react-router子组件作为children被传入父组件。

    17.png

    二、Vue和React框架的相同点

    组件化:React与Vue都鼓励将你的应用分拆成一个个功能明确的模块,这样的组件化使得结构清晰且易复用。

    虚拟Dom:为高效渲染页面,减少性能的消耗,都采取了Virtual Dom。

    配套框架:两个框架都专注于UI层,其他的功能如路由、状态管理(vuex,redux)等都交由同伴框架进行处理。

    构建工具:React可以使用Create React App (CRA),而Vue对应的则是vue-cli。

    相关推荐:

    2020年前端vue面试题大汇总(附答案)

    vue教程推荐:2020最新的5个vue.js视频教程精选

    更多编程相关知识,请访问:编程教学!!

    以上就是vue框架和react框架的区别是什么的详细内容,更多请关注php中文网其它相关文章!

    本文原创发布php中文网,转载请注明出处,感谢您的尊重!
    专题推荐:vue.js react.js
    上一篇:easyui和bootstrap之间有什么区别? 下一篇:bootstrap和elementui的区别是什么?
    第14期线上培训班

    相关文章推荐

    • vue3.0和vue2.0的区别是什么?• react中如何导入图片• react中npm是什么• 5个好用的Vue.js库推荐• vue.js页面间如何实现传值

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网