因为本人用过 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 或渲染函数。这两类组件的比例会根据应用类型的不同有所变化.