React 2022

从 2013 年 React 开放源码到现在已经过去了九年，React 一直是我最喜欢的一个前端开发框架。有追求的团队和公司前端前端团队也都会使用 React 开发。因为 React 的生态丰富又活跃。

这篇文章就来看看 React 2022 年最新的生态。希望对自己和要做Web 开发的读者的带来一些帮助。

前端开发的框架生态主要包含的工具有：

脚手架/构建工具
服务器端渲染框架
跨平台开发框架
状态管理
路由
React Hooks
Style/CSS
国际化
组件/组件库
单元测试

另外还有一些 React 项目多数会被使用的工具：

Typescript 被越来越多的项目使用
ESlint 统一代码规范和错误检查

下面标有 👈🏻 emoji 的项目是我个人推荐使用的。

构建工具/脚手架

构建工具是对源代码和资源做编译、处理、打包的工具。前端开发者们作为非常激进的一群开发者，为了使用先进的的语言特性或非直接被浏览器的支持的代码（例如 JSX、CSS 拓展、Vue 组件），创造出了像 Webpack、Vite、Rollup、Parcel、ESBuild 这类工具。

Webpack 作为前端开发界的老牌构建工具，经久不衰。是作为 React 项目的首选的构建工具。 👈🏻
Vite 是近期出来最受欢迎的构建工具。它内置 ESBuild，并对开发环境优化了构建流程，极大提高开发时的体验。

脚手架可以让我们快速启动项目，这两个工具都有对应使用它们的脚手架。

cerate-react-app 是基于 Webpack 的脚手架。
create-vite 是为 Vite 开发的脚手架。

它们都提供了开箱即用的配置，也有自定义配置方法。也都可以使用各自社区的项目模版。

服务器端渲染框架

Next.js 是最为流行的 React 服务端渲染框架，被许多大型网站使用，包括 Netflix、GitHub、Uber 和星巴克。如果你的项目有 SEO 和 SSR 的需求，是 React 生态下首选的框架。👈🏻
Gatsby.js 是 Meta(Facebook) 开发的使用 GraphQL 数据源和 React 生成静态站点的框架。许多开发者用它来搭建自己的博客。
Remix 新兴的 React 服务端渲染框架，是由 React Router 的开发团队开发的。相比 Next.js 支持子级路由布局的嵌套，但不支持静态网站的生成。
Docusaurus 专注于文档的静态站点的生成工具，许多开源项目会用它来制作项目网站和文档。

跨平台开发框架

React Native 是 Facebook 在 2015 开源的用 React 来编写代码，但使用非 webview 来渲染的一个框架。至今一直在积极维护和使用。在 React 生态下它是唯一的跨平台开发开发框架。👈🏻

如果不局限于 React 生态的话它存在两个强有力的竞争对手：Cordova 和 Flutter。但是相比 React Native ，Cordova 作为 webview 的套壳的方案，渲染性能不及 React Nitive，适合做 UI 不复杂的应用。Flutter 在语言和应用生态则需要追赶一些时日。

状态管理

React 2022 的生态里，状态管理库是最难以选择和比较的。因为随着 React 的更新迭代，状态管理管理库的设计哲学和使用范式也经历着巨变和分化。从集中式的到原子式组件自制的管理方式，从 Provider 到 Hooks 的方式分发状态，从实用主义到遵循 React 设计哲学，有丰富的选择。

首先你要选择状态应当集中管理，还是以原子组件自制的方式管理。如果你喜欢以集中方式管理，你可以选择 Redux、MobX 和 Zustand。原子状态管理库可以选择 Recoil 和 Jotai。

Redux 如果你不知道怎么选，这是一个稳妥的选择。但它上手比较难，但随着 Redux Hooks 和 Redux Toolkit 的出现，学习过程变得容易。👈🏻
MobX 非常的实用主义，容易上手，如 VUEX 简单直觉。
zustand 只支持 Hooks 精简的集中式状态管理库。👈🏻
Recoil Facebook 自己也开源了 Recoil 这样的遵循了 React Hooks 的使用方式的原子状态管理库。
Jotai 也是一个符合 Hooks 精神的原子状管理态库。相比 Recoil 简洁许多。👈🏻

路由

浏览器的路由经过多年的发展，开成了一个简洁而又全面的页面（界面）导航系统。由于它的出色也被其它应用系统吸收。建议在所有大小型的项目引入路由功能。

React Router 在 React 生态中目前是不二的选择。👈🏻
Reach Router 在前几年由 React Router 分化精简出来的，也受到一些开发者的拥簇。

React Hooks

React Hook 能将函数组件内的重复逻辑抽出，为 React 带来了更强大的逻辑封装能力。Vue 3 也效仿推出了组合式 API。

异步/请求

异步请求 hook 通常用来做网络请求，当然也可以用来做其它异步操作。异步 hooks 库通常还会集成常用的异步状态、缓存、渲染优化、自动更新异步数据等一些逻辑功能，会简化我们在 React 中对异步业务的开发。

React Query 被作者定义为异步状态管理器，不仅针对网络请求。
SWR 默认使用 fetch 请求，仅需一行代码，你就可以简化项目中数据请求的逻辑。👈🏻

综合

React Use 是使用最广泛的 React Hooks 集合。包含了很多 Web API 和 JavaScript 常用基础逻辑的 hook 封装。👈🏻
ahooks 是一套由阿里巴巴开源的 React Hooks 库。封装了常用的基础逻辑，以及大量提炼自业务的高级 Hooks。

Style/CSS

React 组件化的开发模式，自然对 CSS 也有组件化的要求，于是诞生了各种组件 CSS 绑定方法。

CSS Modules 是 CSS-in-CSS 的方法，它被 cerate-react-app 默认支持。
Styled Components 是目前最受欢迎的 CSS-in-JS 的方案。

国际化

react-i18next i18next 一个强大的国际化 JavaScript 插件。 react-i18next 为 React 项目中使用 i18next 提供了方便的工具和组件。👈🏻
react-intl react-init 是基于另一个强大的国际化 JavaScript 库 formatjs 构建的 React 国际化工具库。

组件

组件是 React 设计出来组织代码的方式，UI 组件 和 UI 组件库是 React 生态的最顶层。它们是否丰富反应了一个前端框架是否流行。

表单组件

如果你在使用 UI 库你可以优先使用组件库内的表单组件，否则你可以在下面选择一个：

React Hook From 使用它的 useForm hook 和 Controller 组件 API 来帮你实现表单的逻辑。
FORMIK 使用组件的封装的方式提供表单功能。
React Final Form 与 FORMIK 类似。

可视化组件

recharts 是基于 svg 的简洁图表组件库。
visx 是来自 airbnb 团队对 D3 封装的图表组件集合。
G2 是蚂蚁集团大数据可视化解决方案中的图表部份，有丰富的中文文档。👈🏻
VICTORY 是一个视觉风格很独特的图表库。

富文本编辑组件

富文本编辑器在前端开发中是个无底洞，React 生态中有这些开源的组件可以使用，我们要心怀感恩。

Draft.js 是一个富文本编辑器的库，包含了 React 组件，由 Facebook 开发的，在 React 开发者中非常受欢迎。
Slate React Slate 是一个功能丰富的富文本编辑器库，支持 Markdown。官方实现了 React 组件。👈🏻
ReactQuill
tiptap 是一个支持实时协作的富文本编辑器。官方实现了 React 和 Vue 组件。

UI 组件库

如果想要快速产出一个项目，或者做一些中后台的项目， UI 库是必不可少的。React 有最丰富的开源 UI 库生态。

Ant Design 是阿里蚂蚁金服的前端团队为企业目标用户制作的 UI 组件库。它具涵盖的中后台项目会用到的绝大多数组件，每个组件都有完善的功能，交互体验也非常好。是我最喜欢的 React 组件库。👈🏻
MUI 是根据谷歌的设计指南创建的，提供了全套的用户端 UI 组件，帮助你快速构建一个全新的项目。也是最多人使用的 React UI 组件库。👈🏻
React Bootstrap Bootstrap 5 的 React UI 组件库。
Mantine 一个组件和功能丰富的 UI 库，适合快速构建网站。