React、Vue浅析

  • Z时代
  • 2024-01-10
  • 分类：综合

react

 关注前端的同学都了解，React和Vue是目前应用很广泛的两个前端框架。React是由Facebook开发的，Vue起初则是由google一名程序员尤雨溪开发的。截止到目前github上显示，React的Star数为87422，Vue的为78523，数据差距越来越小。两个框架国内外使用概况如图1所示：


          图1 国外前端框架使用概况

 上图显示，世界范围内来看，React依然比Vue要受欢迎。实际的项目中，开发者更倾向于选择React框架。毕竟React背后是Facebook团队支持，更新维护迭代更快，许多衍生组件比较完善，开发中遇到问题更容易找到已有的解决方案。React最大的特点是虚拟DOM，可以更优实现DOM更新，提升项目性能，更适合应用于大型项目的开发。因此，很多公司选择React框架。据我所知，一开始百度和大众点评的前端中React框架的使用比较广泛。现在，据我所知国内一些使用React框架的前端项目也开始向用Vue重构，或者新启的项目中引入Vue框架。据了解美团，滴滴等公司目前主流框架为Vue。图2是国内前端框架的使用情况：


图2 国内前端框架使用概况

     由上图可见，国内React和Vue的比例基本持平。尤其是自Vue2.0引入了虚拟DOM之后，有效优化了前端性能。而且Vue框架本身对开发者比较友好，更容易上手开发。关于React和Vue框架哪个更好的争议很大，在我看来框架没有真的所谓的更好。而是相对于个人的开发习惯或者项目需要，哪一个更适合。下面将从六个方面来比较两个框架的异同。

1.Virtual DOM

 React和Vue最大的相似之处就是Virtual DOM。作为前端开发者我们应该深有体会，项目中使用JQuery库，我们需要频繁地对DOM节点进行操作。大量的节点处理，十分耗费性能。如果我们把DOM结构抽象为js对象，通过对比修改前后js对象的变化，之后再映射到真实DOM上，是不是可以很大程度上优化前端的性能？Virtual DOM就是运用的这个思想，当元素状态发生变化时，生成一个新的Virtual DOM对象，然后计算新旧Virtual DOM对象之间的差异，更新到真实的DOM上。

 在计算新旧DOM对象的差异时，首先深度优先遍历新旧DOM树存储为两个对象，其次使用Diff算法，比较两个对象的异同，包括层级的比较，组件的比较及节点的比较，将结果存储到patch数组中。最后深度优先遍历真实DOM结构，将patch数组中存储的异同更新到真实DOM结构中。更新时，包括节点的增删及位置调换。

 虚拟DOM也有一定的局限性，如果DOM变化很少，采用上述方法来比较麻烦，不如之前直接对节点进行操作。但针对整个项目来说，通常会有大量的DOM变化，还是引用虚拟DOM比较好。其实，之前也有对大量DOM变化处理的方法documentFrament，它需要我们手动去处理，而框架中引入Virtual DOM可以自动化处理。其中两个框架中Virtual DOM也有细微差别。React会因为父组件中数据的变化，引起所有子组件的render，除非手动加入shouldComponetUpdate来判断是否需要更新。而Vue则不用手动设置，只会更变化的组件。


2.组件化

 组件化也是React框架的一大特色，Vue框架出现于React框架之后，其设计也引入了组件化。我们在项目开发过程中，首先分析可以分成一个模块module，其次每个模块又要拆分出多少组件，有哪些可以提取出作为公共组件。组件化使我们的项目结构更加清晰，同时更容易定位问题及维护。React中创建组件的语法如下：

date.jsx:

import React from‘react’;

export defaultReact.createClass({

render() {

return (

<div>date</div>

)

}

})

index.js:

import React from‘react’;

import Date from‘date.jsx’;

export defaultReact.createClass({

render() {

return (

<Date/>

)

}

})

     上述代码可知组件的创建及使用方法，React中所有的组件渲染使用的是JSX，JS和HTML可以混合在一起编写代码。组件化之后便涉及到组件间的数据交流。React是单向数据流，父子组件可以通过this.props及自定义事件来实现组件间的通信。非父子组件间的通信，我们可以使用ref参数设置或自定义事件来实现。

     Vue也有组件化的特点，它支持JSX来渲染组件，但自带的模板格式是其一大优点。只有模板中的HTML是有效的，高效分离DOM结构和页面逻辑代码。模板格式如下所示：

<template>

<div></div>

</template>

var data = {“a”:1}

new Vue({

data:data

})

     Vue中父子组件间的通信也可以通过Prop和自定义事件来实现，非父子组件间的通信可以借助于订阅／发布模式来实现。


3.状态管理

 大型复杂的项目数据量比较大，组件间的交互通信比较频繁。因此，项目中我们通常借助一些插件来统一对数据进行状态管理。React中我们都引入Redux来统一管理数据，首先是用户操作触发action方法，对应reducer中的类型，生成新的state对象，然后更新store中存储的对象。返回新的state对象，映射到view视图中。Redux的开发应用结构如图3所示：


图3 Redux开发应用结构

 类似于React 中使用Redux，一般我们使用Vuex来进行状态管理。Vuex的开发应用结构如下官网借用的图4所示，Vuex的核心概念如下：

1）State：Vuex 使用单一状态树，用一个对象包含全部的应用层级状态，作为一个唯一数据源而存在。也既是说，每个应用将仅仅包含一个 store 实例。

2）Getters：用于从state中获取状态值。

3）Mutation：用于 更改 Vuex 的 store 中的状态的唯一方法。每个 mutation 都有一个字符串的 事件类型 (type)和一个回调函数 (handler)，它类似于Redux中的Reducer。这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数。

4）Action：它提交的是 mutation，而不是直接变更状态；Action 可以包含任意异步操作。


图4 Vuex开发应用结构


4.路由

 针对单页应用项目的开发，React和Vue都提供了各自的路由插件react-router、vue-router。他们都是利用组件化的思想来实现的，原理比较相似，只是使用时代码编写有些不同。React是组件的形式，Vue是JS对象的形式。

React中app.jsx部分伪代码：

import React from'react';

import ReactDOM from'react-dom';

import { Router, Route,hashHistory, IndexRoute, Redirect } from 'react-router';

ReactDOM.render((  

<Router history={hashHistory}>    

<Route path="/" component={主页面组件名}>      

<Route path="sec" component={某一页面的组件名}>        

<IndexRoutecomponent={ShowIndex}></IndexRoute>       <Route path="/shows/:id"onEnter={handleEnter} onLeave={handleLeave} component={Shows} />         <Redirectfrom="shows/:id" to="/shows/:id" />       </Route>    

</Route>  

</Router> ), app);

 

Vue中app.js的部分路由配置伪代码：

import Vue from'./libs/vue.js';

import VueRouter from'./libs/vue-router.js'; Vue.use(VueRouter); router.map({  

'/':{    

component:index,    

subRoutes:{      

'/':{        

component:main 主页面组件     

},      

   '/my':{        

name:'my',        

component:my 某一页面组件     

},     

 '/results/:key':{        

name:'results',        

component:results某一页面组件   

 }    

}  

}

}); 


5.脚手架

 两个框架都有自己的脚手架，我们无需自己去搭建项目框架，可以直接在github上git clone到本地直接使用。React的脚手架为create-react-app，目前有4万多人star。Vue的脚手架为vue-cli，目前star只有8千多。两个官方脚手架都使用npm／yarn来管理包依赖，webpack为构建工具。


6.React Native与Weex

 React Native和Weex分别是React和Vue框架衍生出可以跨平台，使用同一接口开发web、安卓、IOS的应用。实现了一次编写，多端运行。两者都封装了一些组件，开发时可以直接使用，组件在多端通用，只有极少的组件在安卓和IOS段有差异。相对来说React Native的应用比较广泛，很多公司都成立了专门研究其应用的小组，甚至有些重构开发的app已经上线。据我所知，斗鱼直播就有专门使用React Native开发的应用，但是下载量比较小。Weex是由阿里巴巴的技术人员引入尤雨溪的前端Vue开发的，目前应用范围较小，主要是阿里的产品在使用该技术。就个人经验来说，有一定的前端基础及对两个框架的开发使用基础，在学习React Native和Weex开发多端使用的应用比较容易。否则，没有任何开发基础还是相对来说很困难的。

     以上便是我对两个框架的浅显的理解，参考了网上的很多资源。就我个人而言，两个框架我都使用过。在点评实习的时候，使用的是React框架，在滴滴出行实习的时候使用的是Vue框架。对于初学者来说React上手开发相对Vue来说要难一些，只有清楚地理解React原理才能去开发。而Vue则不同，在官网学习一些api语法，便可以尝试上手开发。看的越多越发现自己的无知，需要深入学习的知识还有很多。


参考资料

https://zhuanlan.zhihu.com/p/20346379?refer=purerender

https://segmentfault.com/a/1190000004913592

https://www.cnblogs.com/lvyongbo/p/5938153.html

https://www.jianshu.com/p/8b94f1b98578

https://www.cnblogs.com/axl234/p/5729072.html

https://vuex.vuejs.org/en/intro.html



以上是 React、Vue浅析 的全部内容， 来源链接： utcz.com/z/384313.html

回到顶部