| \ | VUE | React |
|---|---|---|
| 组件引用 | 分为全局注册和局部注册。 | 通过import相应组件，然后模版中引用。 |
| 数据流 | 1.父组件通过传递props来更新子组件视图，显示地调用props选项来声明它期待获得的数据。2.vue是数据可变的，双向绑定，声明式的写法，vue组件的横向拆分很多情况下用mixin。 | 1.官方建议props要像纯函数那样，输入输出一致对应，而且不太建议通过props来更改视图。 2.react是整体的思路的就是函数式，所以推崇纯组件，数据不可变，单向数据流，当然需要双向的地方也可以做到，比如结合redux-form，组件的横向拆分一般是通过高阶组件。 |
| 模版 | 把html，css，js组合到一起，用各自的处理方式，vue有单文件组件，可以把html、css、js写到一个文件中，html提供了模板引擎来处理。提供了v-xxx指令系统。 | all in js，通过js来生成html，所以设计了jsx，还有通过js来操作css，社区的styled-component、js等。 |
| 事件 | 1.每个Vue实例都实现了事件接口，方便父子组件通信，小型项目中不需要引入状态管理机制。2.Vue增加的语法糖computed和watch。 | 1.必须自己实现事件。2.只能使用JSX语法写一套逻辑来实现。 |
| 状态管理 | 1.state对象并不是必须的，数据由data属性在Vue对象中进行管理。2.非父子组件之间嵌套过深的时候状态管理可引用vuex。 | 1.在react中是关键的概念，它是不可变的，在React中你需要使用setState()方法去更新状态。2.非父子组件之间嵌套过深的时候状态管理可引用react-redux。 |
| UI生态 | 1.pc端：iview、element等；2.h5端：有赞vant、mintui等；3.混合开发：weexui，bui-weex；4.微信小程序：iView Weapp、zanui； | 1.pc端：Ant Design、Material-UI等；2.h5端：Ant Design Mobile、weui等；3.混合开发：teaset，react-native-elements；4.微信小程序：iView Weapp、Taro UI； |
| 构建工具 | vue-cli | create-react-app |
| 调试工具 | vue-devtools | react-devtools |
| 渲染方式 | 客户端渲染 | 服务端渲染 |
生命周期图
react
vue
技术栈
vue+vuex
react+redux
参考
https://juejin.im/post/5c18b4adf265da61380f26ad 《Vue与React两个框架的粗略区别对比》
http://caibaojian.com/vue-vs-react.html 《Vue与React两个框架的区别和优势对比》
https://www.jianshu.com/p/8b94f1b98578 《Vue和React对比》
https://www.jianshu.com/p/1ebe36fbdcda 《从2张运行流程图看vue和react区别》