vue和react无疑是当下最火的两大前端框架，面试时也总是会被问到两者相比较的问题。接下来会出一系列vue VS react 的文章，同一功能分别用vue和react去实现，让大家更加充分的了解两者的异同，敬请期待~~~
两者的本质区别
- vue - 本质是 MVVM 框架，由 MVC 发展而来
- React - 本质是前端组件化框架，由后端组件化发展而来
- vue - 使用模板（最初由 angular 提出）
- React - 使用 JSX（jsx不是react独有的，已经成了一种标准）
- 模板语法上，我更加倾向于 JSX，因为它更接近js 语法（列如vue的循环用的是新指令v-for,而react用的是js中的map()函数）
- 模板分离上，我更加倾向于 vue（数据和视图分离的更彻底）
- React 本身就是组件化，没有组件化就不是 React
- vue 也支持组件化，不过是在 MVVM 上的扩展
- 对于组件化，我更加倾向于 React ，做的彻底而清晰
两者共同点
- 都支持组件化
- 都是数据驱动视图
接下来的内容都是以vue3、react17+（hooks）为基础的，如果还是在使用vue2或react的类组件，可以先去了解下vue3以及react hooks的基础内容。
今天先从两者的生态系统聊起~~~
脚手架
vue/cli
yarn global add @vue/cli
vue create my-project
create-react-app
官网：create-react-app.bootcss.com/docs/gettin…
npx create-react-app my-app --template typescript
create-react-app 是基于 webpack 的打包层方案，包含 build、dev、lint 等，他在打包层把体验做到了极致，但是不包含路由，也不支持配置。所以，如果大家想基于他修改部分配置，或者希望在打包层之外也做技术收敛时，就会遇到困难。
umi
yarn create @umijs/umi-app
umi天然就支持typecsript、less、css modules，并整合了antd、dva（阿里自研的数据流方案），提供国际化、权限、数据流、配置式路由等开发者常用的功能，能够节省大量的初始化项目时间。
Ant Design Pro
Ant Design Pro 是基于 Ant Design 和 umi的封装的一整套企业级中后台前端/设计解决方案，致力于在设计规范和基础组件的基础上，继续向上构建，提炼出典型模板/业务组件/配套设计资源，进一步提升企业级中后台产品设计研发过程中的『用户』和『设计者』的体验。
npm i @ant-design/pro-cli -g
pro create myapp
总结：
脚手架方面vue的文档更全，标准更加统一，但react可选择性和可配置性都更强。
全家桶
状态管理工具
Pinia
大家之前都是用的vuex，但现在vue3官方推荐的就是Pinia，还没接触过的可以先去了解下。和vite一样，真香
yarn add pinia
redux
redux、react-redux、redux-thunk、redux-saga
官网：Redux - A predictable state container for JavaScript apps. | Redux
Redux Store本身只有同步Dispatch Action的能力，reducer也不应该包含任何副作用，副作用通常需要第三方中间件，如redux-thunk (async/await写法)，redux-saga (generator写法，dva内置)。
redux的灵活性比较高、可配置性也比较强，导致其上手起来比较困难。大部分人觉得react比vue入门难，很大一部分原因是因为redux。
但刚入门还是建议大家详细学习下redux，等真正做项目的时候可以直接使用Dva、Redux Toolkit（RTK）,它们都提供了开箱即用的api，可以提升开发效率
路由
路由直接使用react、vue官方推荐的react-router、vue-router即可，没啥好介绍的
一套代码多平台应用
uniapp
uni-app 是一个使用Vue.is开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。
taro
官网：taro-docs.jd.com/taro/docs/
Taro 是一个开放式跨端跨框架解决方案，支持使用 React/Vue/Nerv 等框架来开发 微信)/ 京东/ 百度/ 支付宝/ 字节跳动/ QQ / 飞书小程序 / H5 / RN 等应用。
总结：
平时开发过程中需要一套代码多端应用的，react技术栈的一般首选都是taro,vue技术栈的都是首选uniapp。不管是官方文档还是ui组件库，我自己使用下来的感觉都uniapp体验更好。
其它
vite
官网：Vite中文网
vite是一个开发构建工具，开发过程中它利用浏览器原生 ES Module 特性导入组织代码，生产中利用rollup作为打包工具，它有如下特点：
- 光速启动
- 热模块替换
- 按需编译
创建vue项目
yarn create vite my-vue-app --template vue
初始目录结构如下：
创建react项目
yarn create vite my-react-app --template react
初始目录结构如下：
至于其它插件的安装以及完整的项目构建，可以看我之前的这篇文章。不过当时用的是create-vite-app，现在已经被弃用了。
hooks
react 在 16.8.x 版本正式具备了 hooks 能力，vue3 也从之前的options Api变成了composition Api(组合API，类似React Hooks)。除此之外，solid.js、 preact 等框架，也是开始选择加入 hooks 大家庭。虽然目前仍然是 class Component 和 hooks api 并驾齐驱的场面，但未来几年里，hooks 很可能取代 class Component 成为业内唯一的标准。
个人观点：
react 组件化更好，可配置性更强。vue中文文档更全，上手更快。vue2在大型项目的开发以及后期维护上确实略逊色于react，但是vue3+vite+pinia+ts是真的香。
