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                                                  （源码目录）5个

1
│ ├──  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的发展里程碑如下：

    2013年12月24日，发布0.7.0。

    2014年1月27日，发布0.8.0。

    2014年2月25日，发布0.9.0。

    2014年3月24日，发布0.10.0。

    2015年10月27日，正式发布1.0.0。

    2016年4月27日，发布2.0的preview版本。

    2018年11月27日，发布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 或渲染函数。这两类组件的比例会根据应用类型的不同有所变化.