12分钟讲解主流React库

本内容是对 Every React Library Explained in 12 Minutes 内容的翻译与整理。

---

React Router

React Router 是一个用于控制网站导航的库，同时也允许你自定义网站的 URL。它使用自定义组件，如 BrowserRouter、Routes 和 Route 组件，以创建 URL 和链接页面，你可以通过 path 属性来定义这些链接。在 React Router 中，你使用 Link 组件代替传统的 <a> 标签来放置链接。你也可以创建嵌套路由。React Router 还提供了自定义 Hook，如 useNavigate 和 useParams。

---

ShadCN

ShadCN 是 React 的 UI 组件库。你可以使用它搭建漂亮且实用的 UI 组件，这些组件使用 Tailwind CSS 样式，并基于 Radix UI 构建，因此高度可自定义。与其安装组件和 node 模块，你只需要复制粘贴代码到你的项目中即可。你也可以使用名为 V0 的聊天机器人创建 ShadCN 组件，V0 会自动生成组件，你只需点击几下就能将其添加到项目中。

---

Redux

Redux 是一个状态管理库。状态管理是将网站不同部分连接起来的一种方式，使它们协同工作。网站的不同部分，如视频、播放列表、按钮、菜单、描述等，都依赖同一份信息。但由于用户不断与网站互动，这些组件需要不断更新变化。

这时状态（state）就发挥作用了。状态就像网站的“记忆”，它包含了网站用来判断显示什么内容以及如何响应的所有信息。网站会在你在搜索框中输入文字时使用状态---比如自动补全或显示历史搜索、切换浅色/深色模式、添加或删除购物车中的商品等。

Redux 使用一个叫做 store（存储） 的地方来保存这些信息。然后通过 container（容器） 获取这些数据并传递给相应的组件。它还响应被称为 actions（动作） 的事件，比如用户点击、输入等。当用户执行一个动作后，这个动作会被传递给 reducer（简化器），reducer 决定如何更新 store 中的信息。

---

Formik

Formik 是一个表单管理库，让构建表单变得更容易。它处理状态管理、验证和错误处理。它还可以与另一个工具 Yup 配合使用。你通常从 Formik 组件开始，然后使用 Formik 的 Hooks 为表单添加功能。

---

Framer Motion

Framer Motion 是一个非常强大的 React 动画库。你可以使用 animate、initial 和 transition 等属性控制动画。它还支持手势操作，如悬停、点击、拖动和滚动。你使用 motion.div 组件开始，然后实现 useAnimation Hook 来自定义动画。Framer Motion 优化为 60 帧/秒，并可以使用 CSS 变换和 WebGL 图形。

---

Swiper

Swiper 是一个用于创建轮播图、图片画廊和 Hero 区块的库，适用于桌面、平板和手机。其 UI 组件具有响应式设计和流畅的过渡效果，并允许你创建导航控件。比如，你可以使用 Swiper 组件作为主滑块，使用 SwiperSlide 组件创建每个幻灯片。

---

TanStack Query

React Query（现称为 TanStack Query）是一个用于 React 的服务端状态管理库。它用于处理异步请求和 API 调用。你可以用它进行分页和无限滚动，通过处理数据的获取和重新获取。你可以使用 useQuery Hook 来获取和缓存数据，使用 useMutation Hook 来修改服务器数据。

---

React Three Fiber

React Three Fiber 是 3JS 库的 React 渲染器。它允许你创建 3D 场景、动画和游戏图形。可与其他库如 Framer Motion 和 React Spring 搭配使用。你可以使用 useLoader Hook 加载 3D 模型或 glTF 文件，还可以使用 useThree Hook 使用诸如相机等 3JS 对象。但需要掌握一些基本的 3D 概念，如网格（mesh）、材质（material）、着色器（shader）。

---

React Admin

React Admin 是一个用于构建管理面板和企业级应用的框架，内置了许多组件。你可以使用 GraphQL 或 Firebase 将其连接到后端。它可以创建包括身份验证和权限控制在内的 CRUD 操作，也非常适合构建后台管理系统和 CMS。

---

React Bootstrap

React Bootstrap 是 Bootstrap 的 React 版本。它自带如按钮、模态框、导航栏等组件。原始 Bootstrap 依赖 CSS 和 jQuery，而 React Bootstrap 则能访问虚拟 DOM。

---

React Tailwind

React Tailwind 是一个用于构建网站用户界面的库。相较于 Bootstrap，它的组件更可自定义。虽然不像 Bootstrap 那样自带组件，但你可以通过 npm install 命令将 Tailwind 安装到 React 项目中。

---

Material UI

Material UI 是一个基于 Google Material Design 的 React UI 组件库，包含 50 多个预建组件。支持自定义主题、响应式设计，并优化了可访问性（适用于屏幕阅读器）。它还自带一个图标库 Material Icons。

---

Chakra UI

Chakra UI 是一个强调可访问性的 UI 组件库。所有组件遵循 WAI-ARIA 标准，帮助残障人士使用界面。你可以创建主题、支持暗模式、为组件添加样式，提供 useDisclosure Hook 管理状态以及 useToast Hook 显示反馈信息，也可通过 Framer Motion 添加动画。

---

Ant Design

Ant Design（由蚂蚁集团开发）是一个企业级 React UI 组件库，包含按钮、日历、树形结构、图表等组件，支持 50 多种语言，是构建企业应用的理想选择。

---

Headless UI

Headless UI 与其他 UI 库不同，它提供完全无样式的组件，让你可以自由使用喜欢的 CSS 库自行定制。它注重可访问性，并支持状态管理。

---

React 360

此项目已经archived

React 360 是一个用于构建沉浸式 360 度虚拟现实体验的框架。它结合 WebGL 和 WebVR，可在 VR 头戴设备上运行。你可以用它创建 3D 环境和空间界面，添加 360 视频、图片和全景图。内置组件包括 View、Text、Entity 和 VRButton，可用于虚拟旅游、产品演示和培训模拟。

---

Recharts

Recharts 是基于 D3JS 构建的图表库，用于创建响应式图表、可视化图形。利用 React 的组件结构构建图表、饼图、折线图等，支持动画和交互操作。

---

Zustand

Zustand 是一个轻量级状态管理库，几乎不需要模板代码，被认为比 Redux 更简单。它不需要 reducer、action 或 provider。

---

React Hook Form

React Hook Form 是一个用于 React 表单管理的库，可减少不必要的重新渲染。它与 Chakra 和 Material UI 等 UI 库完美集成。你可以使用 useForm Hook 管理状态和验证，编写更少代码构建高效表单。

---

React Spinner

React Spinner 是一个加载动画的可视化库，用于在加载内容时提供视觉反馈。你可以选择多种加载器，比如 CircleLoader，并自定义颜色、尺寸、速度和样式。

---

React DnD

React DnD 是一个为 React 项目添加拖放功能的库。支持鼠标、触控、键盘拖放。使用 useDrag Hook 使组件可拖动，useDrop Hook 使组件可以接收拖拽项目。适合用于文件上传器、表单构建器和游戏界面。

---

React AG Grid

React AG Grid 是一个数据表格库，支持排序、过滤、分页、行选择，能处理大量数据。你可以用 pagination 属性启用分页，用 columnDefs 定义列，还可以将表格导出为 Excel。

---

Vite

Vite（取自法语“快”）是一个前端构建工具，专为加快开发速度而设计。虽然由 Vue 的作者开发，但也支持 React。你可以在命令行中快速创建 React 项目。与 create-react-app 相比，启动速度更快。它还支持 热模块替换（HMR），可以在不刷新页面的前提下即时反映代码更改。

---

Styled Components

Styled Components 是一个 React 的 CSS-in-JS 库，允许你将 CSS 写入组件内，避免全局样式冲突。

---

EmotionJS

EmotionJS 与 Styled Components 类似，也是 CSS-in-JS 库，但更轻量，速度更快，还支持服务端渲染。

---

Mantine

Mantine 是一个 React UI 组件库，提供 100 多个可自定义组件和 50 多个 Hooks。支持响应式设计、浅色/深色主题，内置表单库，适配 Redux 和 Formik。

---

SWR

SWR 是一个用于远程数据获取的 React Hooks 库，全称是 “stale while revalidate”（陈旧但验证）。它支持数据获取、变更、缓存、分页、无限滚动和错误处理。

它的工作原理是：首次加载页面时，先显示本地缓存的数据（即使有点旧），确保加载迅速，同时请求服务器上的新数据，一旦新数据返回，就更新缓存并重新渲染页面，整个过程用户无感。

---

Next.js

Next.js 是一个用于构建服务端渲染页面的 React 框架。它可以帮助开发者创建全栈应用，提升性能、加载速度和 SEO。

---

React Chart.js 2

React Chart.js 2 是将 Chart.js 集成到 React 中的组件库。提供如柱状图、折线图、饼图等组件，支持事件处理（如点击、悬停），图表高度可自定义。

---

React Spring

React Spring 是一个专注于物理动画的 React 动画库，模拟现实世界的运动。不同于 CSS 动画，它使用弹簧物理（spring physics）。你可以使用 useSpring Hook 控制动效，比如按钮、div 的过渡、透明度、缓动效果等。