Eson Wong's Blog

编程笔记,投资记录, 读书总结, 生活心得

0%

React 2022

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,并对开发环境优化了构建流程,极大提高开发时的体验。

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

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

服务器端渲染框架

React 服务器端渲染框架

  • Next.js 是最为流行的 React 服务端渲染框架,被许多大型网站使用,包括 Netflix、GitHub、Uber 和星巴克。如果你的项目有 SEO 和 SSR 的需求,是 React 生态下首选的框架。👈🏻

    GitHub Repo stars npm

  • Gatsby.js 是 Meta(Facebook) 开发的使用 GraphQL 数据源和 React 生成静态站点的框架。许多开发者用它来搭建自己的博客。

    GitHub Repo stars npm

  • Remix 新兴的 React 服务端渲染框架,是由 React Router 的开发团队开发的。相比 Next.js 支持子级路由布局的嵌套,但不支持静态网站的生成。

    GitHub Repo stars npm

  • Docusaurus 专注于文档的静态站点的生成工具,许多开源项目会用它来制作项目网站和文档。

    GitHub Repo stars npm

跨平台开发框架

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

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

状态管理

React 状态管理

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

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

  • Redux 如果你不知道怎么选,这是一个稳妥的选择。但它上手比较难,但随着 Redux Hooks 和 Redux Toolkit 的出现,学习过程变得容易。👈🏻

    GitHub Repo stars npm

  • MobX 非常的实用主义,容易上手,如 VUEX 简单直觉。

    GitHub Repo stars npm

  • zustand 只支持 Hooks 精简的集中式状态管理库。👈🏻

    GitHub Repo stars npm

  • Recoil Facebook 自己也开源了 Recoil 这样的 遵循了 React Hooks 的使用方式的原子状态管理库

    GitHub Repo stars npm

  • Jotai 也是一个符合 Hooks 精神的原子状管理态库。相比 Recoil 简洁许多。👈🏻

    GitHub Repo stars npm

路由

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

  • React Router 在 React 生态中目前是不二的选择。👈🏻

    GitHub Repo stars npm

  • Reach Router 在前几年由 React Router 分化精简出来的,也受到一些开发者的拥簇。

    GitHub Repo stars npm

React Hooks

React Hooks 库

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

异步/请求

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

  • React Query 被作者定义为异步状态管理器,不仅针对网络请求。

    GitHub Repo stars npm

  • SWR 默认使用 fetch 请求,仅需一行代码,你就可以简化项目中数据请求的逻辑。👈🏻

    GitHub Repo stars npm

综合

  • React Use 是使用最广泛的 React Hooks 集合。包含了很多 Web API 和 JavaScript 常用基础逻辑的 hook 封装。👈🏻

    GitHub Repo stars npm

  • ahooks 是一套由阿里巴巴开源的 React Hooks 库。封装了常用的基础逻辑,以及大量提炼自业务的高级 Hooks。

    GitHub Repo stars npm

Style/CSS

React Style/CSS 方案

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

国际化

React 国际化

  • react-i18next i18next 一个强大的国际化 JavaScript 插件。 react-i18next 为 React 项目中使用 i18next 提供了方便的工具和组件。👈🏻

    GitHub Repo stars npm

  • react-intl react-init 是基于另一个强大的国际化 JavaScript 库 formatjs 构建的 React 国际化工具库。

    GitHub Repo stars npm

组件

React 组件生态

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

表单组件

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

  • React Hook From 使用它的 useForm hook 和 Controller 组件 API 来帮你实现表单的逻辑。

    GitHub Repo stars npm

  • FORMIK 使用组件的封装的方式提供表单功能。

    GitHub Repo stars npm

  • React Final Form 与 FORMIK 类似。

    GitHub Repo stars npm

可视化组件

  • recharts 是基于 svg 的简洁图表组件库。

    GitHub Repo stars npm

  • visx 是来自 airbnb 团队对 D3 封装的图表组件集合。

    GitHub Repo stars

  • G2 是蚂蚁集团大数据可视化解决方案中的图表部份,有丰富的中文文档。👈🏻

    GitHub Repo stars npm

  • VICTORY 是一个视觉风格很独特的图表库。

    GitHub Repo stars npm

富文本编辑组件

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

  • Draft.js 是一个富文本编辑器的库,包含了 React 组件,由 Facebook 开发的,在 React 开发者中非常受欢迎。

    GitHub Repo stars npm

  • Slate React Slate 是一个功能丰富的富文本编辑器库,支持 Markdown。官方实现了 React 组件。👈🏻

    GitHub Repo stars npm

  • ReactQuill

    GitHub Repo stars npm

  • tiptap 是一个支持实时协作的富文本编辑器。官方实现了 React 和 Vue 组件。

    GitHub Repo stars npm

UI 组件库

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

  • Ant Design 是阿里蚂蚁金服的前端团队为企业目标用户制作的 UI 组件库。它具涵盖的中后台项目会用到的绝大多数组件,每个组件都有完善的功能,交互体验也非常好。是我最喜欢的 React 组件库。👈🏻

    GitHub Repo stars npm

  • MUI 是根据谷歌的设计指南创建的,提供了全套的用户端 UI 组件,帮助你快速构建一个全新的项目。也是最多人使用的 React UI 组件库。👈🏻

    GitHub Repo stars npm

  • React Bootstrap Bootstrap 5 的 React UI 组件库。

    GitHub Repo stars npm

  • Mantine 一个组件和功能丰富的 UI 库,适合快速构建网站。

    GitHub Repo stars npm

单元测试

单元测试工具是开发生态中重要的一部份。在写通用组件库时,它是必备的!React 常见的测试库有 2 个:

  • Jest 是最受欢 JavaScript 测试框架。它允许你使用 jsdom 操作 DOM。

    GitHub Repo stars npm

  • React Testing Library 能让你不依赖 React 组件具体实现对他们进行测试的辅助工具。

    GitHub Repo stars npm

欢迎关注我的其它发布渠道