React和Vue的区别

三大框架对比

2009年，Angular诞生，Google开发的，国内用的非常非常少；

2012年，React诞生，Facebook开发的，国内20%市场份额；

2014年，Vue诞生，尤雨溪开发的，国内80%市场份额。

React的起源

React 起源于 Facebook 的内部项目，因为该公司对市场上所有 JavaScript MVC 框架，都不满意，就决定自己写一套，用来架设Instagram 的网站。做出来以后，发现这套东西很好用，就在2013年5月开源了。

React特点

1.采用组件化模式，声明式编码，提高开发效率和组件复用率
2.在React Native中可以用React语法进行移动端开发
3.使用虚拟DOM和优秀的Diffing算法，尽量减少与真实DOM的交互，提高性能
4.使用特殊的jsx（JavaScript XML）语法
5.使用单向响应的数据流。

React的现状

https://github.com/facebook/react

记得去star

GitHub - facebook/react-native: A framework for building native applications using React

react的中文官网
快速入门 – React

入门 - React 中文网

React的版本

重要版本发版时间

序号	版本号	发版时间	重要更新
1	16	2017年9月26	引入es6的类组件
2	16.3	2018年4月3日	生命周期更新
3	16.4	2018年5月23日	生命周期更新
4	16.8	2019年2月6日	引入 react hooks
5	17.0	2020年10月20日	过渡版本
6	18.0	2022年3月29日	写法改变，严格模式发生改变

React依赖介绍

1）react.js:React核心库。
2）react-dom.js:提供操作DOM的react扩展库。
3）babel.min.js:解析Jsx语法代码转为Js代码的库。 

生态圈

状态管理

Redux JavaScript 状态容器，提供可预测化的状态管理

MobX 通过函数响应式编程使得状态管理变得简单和可扩展

Redux Thunk Redux的异步处理中间件

Redux Saga Redux中间件,用于管理应用程序 Side Effect(副作用，例如异步获取数据，访问浏览器缓存等)

Dva 一个基于 redux 和 redux-saga 的数据流方案

UI组件库

Ant design 基于 Ant Design 设计体系的 React UI 组件库，主要用于研发企业级中后台产品

Ant design mobile 基于 Ant Design 设计体系的 React UI 移动端组件库

MaterialUI 世界最受欢迎的基于质感设计的React UI库

React toolbox 一套使用CSS模块功能实现Google的Material Design规范的React组件

React Virtualized 一个能渲染大型列表和表格的React解决方案

Fabric UI 微软开源的UX框架的集合，用于创建共享代码，设计和交互行为的精美的跨平台应用程序

React desktop 基于React的JavaScript库，旨在将本机桌面体验带入网络，其中包含许多macOS Sierra和Windows 10组件。react-desktop与NW.js和Electron.js完美结合，但是可以在任何JavaScript驱动的项目中使用

Zent 有赞 PC 端 WebUI 规范的 React 实现，提供了一整套基础的 UI 组件以及一些常用的业务组件

react-icons 基于React封装的丰富的图标库

Ant-Motion 蚂蚁动画库

工具类

react-copy-to-clipboard  基于React的复制到剪切板组件

qrcode.react 基于React的生成二维码的组件

nprogress 适用于YouTube，Medium等的顶部进度条组件

react-syntax-highlighter 基于React的代码高亮组件

react-contextmenu 右键菜单组件

emoji-mart 基于React的表情库

react-highlight-words 基于React的关键字高亮

react-countup 数字自增动画

react-document-title 动态改变网页title

react-masonry-component react瀑布流组件

react-media react @media 解决方案

react-slick react 跑马灯

short-number 数字转中文

rc-animate react动画组件

react-custom-scrollbars 滚动

particles-bg粒子效果背景

pubsub-js发布订阅插件

react-zmage 基于react可缩放图片控件

Viewer 图片查看器

react-json-view JSON格式化组件

rc-queue-anim react入场顺序组件

数据可视化

AntV 包含 G2、G6、F2、L7 以及一套完整的图表使用和设计规范, 提供强大的数据可视化需求

G2Plot 基于G2封装的开箱即用的可视化组件库

recharts 使用React和D3构建的自定义的图表库

Viser 支持多种主流框架的可视化库

bizcharts 图表库

jspdf pdf生成器

动画/动效果

Halogen 使用React的加载动画集合

react-move 漂亮的，数据驱动的React动画,只需3.5kb（gzip）

react-spring 一个基于弹簧物理学的动画库

Ant Motion 提供了单项，组合动画，以及整套动画解决方案

scenejs 基于JavaScript和CSS时间轴的动画库

react-text-loop 文字轮播动画

react-typed 打字机效果

react-motion spring 动画的提出者，不支持 hooks api

react-spring  灵感来源于 react-motion，支持 hooks，功能强大

framer-motion 支持 hooks，功能强大，同时增加了很多声明式属性，api 简洁友好