vue和react的区别

因为本人用过 java、backbone、underscore、jquery、vue、react 、小程序、week、 react native 等一些相关语言。 所以总有人问我这几些语言之间的区别。在这里我先对vue和react的理解说一下,用前端做原生的 week、 react native下次再讲。

一、vue 和 react 都是一门前端开发语言。

vue 的作者是 中国人
react 的作者是 歪果仁
vue 和 react 这两种语言还在不断发展和维护中…
这个是马优晨的个人理解,但是应该是对的。

二、vue 和 react 都有自己的生态圈(全家桶)。

(1)vue 全家桶
vue-router,
vuex, 
vue-resource 
 ( 实际开发: vue官网推荐使用axios进行http调用代替vue-resource ,axios是一个http请求包。)

再加上构建工具vue-cli,sass样式,就是一个完整的vue项目的核心构成。

Vue两大核心思想: 组件化和数据驱动。

组件化: 把整体拆分为各个可以复用的个体。
数据驱动: 通过数据变化直接影响dom展示,避免dom操作。

(2)React 全家桶
react 
react-router 
redux 
react-redux 
react-router-redux 
redux-saga 
immutable 
reselect 

三、 vue 和 react 都有自己的脚手架工具

vue脚手架: vue-cli、 vue-cli2、 vue-cli3

vue-cli2 生成的目录:

├── build              // 项目构建(webpack)相关代码            (构建)    9个

│ ├── build.js       // 生产环境构建代码

│ ├── check-versions.js // 检查node&npm等版本

│ ├── dev-client.js       // 热加载相关

│ ├── dev-server.js        // 构建本地服务器

│ ├── utils.js          // 构建配置公用工具

│ ├── vue-loader.conf.js // vue加载器

│ ├── webpack.base.conf.js // webpack基础环境配置

│ ├── webpack.dev.conf.js //  webpack开发环境配置

│ └── webpack.prod.conf.js // webpack生产环境配置



二、
├── config// 项目开发环境配置相关代码                        (环境配置)    3个  

│ ├── dev.env.js  // 开发环境变量(看词明意)

│ ├── index.js //项目一些配置变量

│ └── prod.env.js // 生产环境变量



三、
├──node_modules// 项目依赖的模块                          (依赖配置)    1个    




四、

├── src                                                  (源码目录)51
│ ├──  assets// 资源目录

│ │ └── logo.png

2    
│ ├── components// vue公共组件

│ │ └── Hello.vue

3
│ ├──router// 前端路由

│ │ └── index.js// 路由配置文件

4
│ ├── App.vue// 页面入口文件(根组件)

5
│ └── main.js// 程序入口文件(入口js文件)



五、

└── static// 静态文件,比如一些图片,json数据等

│ ├── .gitkeep

六、
├── .babelrc// ES6语法编译配置

├── .editorconfig// 定义代码格式

├── .gitignore// git上传需要忽略的文件格式

├── index.html// 入口页面

├── package.json// 项目基本信息

├── README.md// 项目说明


react: create-react-app 、dva-cli

create-react-app生成的目录:
.idea
node_modules
public
src
.gitignore
reame.md
yarn.lock

缺点:

1- 它不允许在项目生成时进行任何配置,而 Vue 支持 Yeoman-like 定制。
2- 它只提供一个构建单页面应用的单一模板,而 Vue 提供了各种用途的模板。
3- 它不能用用户自建的模板构建项目,而自建模板对企业环境下预先建立协议是特别有用的。


dva生成的目录:
.editorconfig
.eslintrc
.gitignore
.idea
.roadhogrc.mock.js
.webpackrc
mock
node_modules
package-lock.json
package.json
public
src

四、 vue 和 react 的版本迭代

vue 和 react 语言不停地更新迭代,每一个版本都会有添加一些新的生命周期或者删除一些生命周期。

vue至今: vue1、 vue2 、vue3

Vue.js的发展里程碑如下:

    20131224日,发布0.7.02014127日,发布0.8.02014225日,发布0.9.02014324日,发布0.10.020151027日,正式发布1.0.02016427日,发布2.0的preview版本。

    20181127日,发布3.0的preview版本。

目前推荐使用比较稳定的1.0.24版本。

react至今: react14, react15, react16

在这里插入图片描述


五、 vue 和 react 的生命周期

不管是vue 还是 react

生命周期都分为三个过程

  初始化阶段    
  
  运行中阶段  
  
  销毁阶段 

这里我讲一下 vue2 的生命周期和 react 16 前的生命周期:

首先生命周期都是对于组件而言的,而组件在最初设计时 其实相当于一个状态机,既然是状态机 那么状态变换的时候,我们可以它状态变化的时候做一点事情,而这些事情,就是我们的生命周期函数(也叫钩子函数)。不同于传统的函数,必须通过某些事件调用,生命周期这些函数都是完整的 从上往下执行。

( vue2 生命周期 )

在这里插入图片描述

vue生命周期对照表:

在这里插入图片描述

( react16前生命周期 )

在这里插入图片描述

初始化

1、getDefaultProps()

设置默认的props,也可以用dufaultProps设置组件的默认属性.

2、getInitialState()

在使用es6的class语法时是没有这个钩子函数的,可以直接在constructor中定义this.state。此时可以访问this.props

3、componentWillMount()

组件初始化时只调用,以后组件更新不调用,整个生命周期只调用一次,此时可以修改state。

4、 render()

react最重要的步骤,创建虚拟dom,进行diff算法,更新dom树都在此进行。此时就不能更改state了。

5、componentDidMount()

组件渲染之后调用,只调用一次。

更新

6、componentWillReceiveProps(nextProps)

组件初始化时不调用,组件接受新的props时调用。

7、shouldComponentUpdate(nextProps, nextState)

react性能优化非常重要的一环。组件接受新的state或者props时调用,我们可以设置在此对比前后两个props和state是否相同,如果相同则返回false阻止更新,因为相同的属性状态一定会生成相同的dom树,这样就不需要创造新的dom树和旧的dom树进行diff算法对比,节省大量性能,尤其是在dom结构复杂的时候

8、componentWillUpdata(nextProps, nextState)

组件初始化时不调用,只有在组件将要更新时才调用,此时可以修改state

9、render()

组件渲染

10、componentDidUpdate()

组件初始化时不调用,组件更新完成后调用,此时可以获取dom节点。

卸载
11、componentWillUnmount()

组件将要卸载时调用,一些事件监听和定时器需要在此时清除。


六、 vue 和 react 的数据处理

vue 和 react 都是单项数据流,但是都可以进行 双向数据绑定。

数据双向绑定:
view层和Model层的数据相互影响。view层的表单操作、触发事件可能会引起数据变动;ajax请求也可能会引起数据变动,某一数据变动引起另外关联数据的改变。


七、 vue 和 react 端的渲染原理

什么是跨端渲染呢?这里的「端」其实并不局限在传统的 PC 端和移动端,而是抽象的渲染层 (Renderer)。渲染层并不局限在浏览器 DOM 和移动端的原生 UI 控件,连静态文件乃至虚拟现实等环境,都可以是你的渲染层。

为什么不直接使用渲染层的 API 呢?跨端开发的一个痛点,就在于各种不同渲染层的学习、使用与维护成本。而不管是 React 的 JSX 还是 Vue 的 .vue 单文件组件,都能有效地解耦 UI 组件,提高开发效率与代码维护性。从而很自然地,我们就会希望使用这样的组件化方式来实现我们对渲染层的控制了。

传统react 渲染

比如我们都知道,在浏览器中使用 React 时,我们一般需要分别导入 react 与 react-dom 两个不同的 package,这时前端项目的整体结构可以用下图简略地表示:

在这里插入图片描述

很多前端同学熟悉的 UI 库、高阶组件、状态管理等内容,实际上都位于图中封装后「基于 React 实现」的最顶层,连接 React 与 DOM 的 React DOM 一层则显得有些默默无闻。而在 Vue 2.x 中,这种结构是类似的。不过 Vue 目前并未实现 React 这样的拆分,其简化的基本结构如下图所示:

传统vue 渲染
在这里插入图片描述

而现在 用的比较多的是 React Reconciler 适配Vue 非侵入式适配 别问我,这个我不会,想学的自己去研究!!!!!

注意点:

Vue在渲染过程中,会跟踪每一个组件的依赖关系,不需要重新渲染整个组件树。

React每当应用的状态被改变时,全部子组件都会重新渲染。这可以通过shouldComponentUpdate这个生命周期方法来进行控制。


八、 vue 和 react 端的使用场景

在实际开发中我们分这几种情况讨论: (一下内容是马优晨个人想法,不代表全部)

1- 公司规模:

针对于中小型公司为了完成工作的快速迭代,建议采用vue框架。

针对于大型公司或者门户网站 多需要维护的网站请选择react框架。

(在超大量数据的首屏渲染速度上,React 有一定优势,因为 Vue 的渲染机制启动时候要做的工作比较多,而且 React 支持服务端渲染。)

2- 端设计:

针对于移动端,首选vue.入门成本低,快速上手,可以结合 i-view, Element UI等一些成熟的前端UI库一起开发。

针对于PC端,我们首选react,可以结合阿里巴巴的 ant design 进行开发。

3- 系统分类:

针对于维护较少,组件复用要求不高的项目 建议采用 vue.

针对于维护较多,组件复用要求很高的项目 建议采用 react.

4- 组件分类:
组件为两类: 一类是偏视图表现的,一类则是偏逻辑的.
推荐在vue中使用模板,在react中使用 JSX 或渲染函数。这两类组件的比例会根据应用类型的不同有所变化.

相关推荐
<span style="color:#666666;font-size:14px;background-color:#FFFFFF;">ReactVUE是目前最火前端框架,就业薪资很高,本课程教您如何快速学会ReactVUE并应用到实战,教你如何解决内存泄漏,常用UI库使用,自己封装组件,正式上线白屏问题,性能优化等。对正在工作当中或打算学习ReactVUE高薪就业你来说,那么这门课程便是你手中葵花宝典。</span><br /> <br /> <span style="color:#666666;font-size:14px;background-color:#FFFFFF;">学习技巧:此系列课reactvue可以单独学习,无需学会react再学习vue,学习当中不要只看,一定要多敲代码,如果碰到某一个知识点不是很明白,不要钻牛角尖,千万不要因为一个点,放弃整个森林,接着往下学,硬着头皮开发项目只要能亲自开发一个完整项目,你会发现不明白地方自然而然就明白了,项目做出来就真正学会了。</span><br /> <br /> <p> <span style="color:#666666;font-size:14px;background-color:#FFFFFF;">此reactvue课程以面试实战为基础进行讲解,每个知识点都会让你知道在实际项目开发中如何使用,学习后,可以开发大型项目,增强逻辑思维,至少让你拥3年以上开发经验实力!</span> </p> <p> <span style="color:#666666;font-size:14px;background-color:#FFFFFF;"><br /> </span> </p> <p> <span style="color:#666666;font-size:14px;background-color:#FFFFFF;"><span style="color:#666666;font-size:14px;background-color:#FFFFFF;">免费提供《企业级完整实战项目接口文档》,绝对可用!</span><br /> <br /> <span style="color:#666666;font-size:14px;background-color:#FFFFFF;">课程代码ppt均可下载!</span><br /> </span> </p> <p> <span style="color:#666666;font-size:14px;background-color:#FFFFFF;"><span style="color:#666666;font-size:14px;background-color:#FFFFFF;"><img src="https://img-bss.csdn.net/202001081405016470.jpg" alt="" /><img src="https://img-bss.csdn.net/202001081405216987.jpg" alt="" /><img src="https://img-bss.csdn.net/202001081405399767.png" alt="" /><img src="https://img-bss.csdn.net/202001081405501839.jpg" alt="" /><br /> </span></span> </p>
©️2020 CSDN 皮肤主题: 撸撸猫 设计师:马嘣嘣 返回首页