--- theme: github --- > 本文为翻译作品，原文链接：[The React Ecosystem in 2024](https://medium.com/@Choco23/the-react-ecosystem-in-2024-4707e9ab72c0) > 本文更像是流水账，记录了 React 生态圈各项技术，如果你想全面了解 React 生态圈，那么本文一定会对你有很大帮助。 React 已经拥有了一段成功的发展历程，与此同时，围绕 React 基础也稳步发展了一个强大且复杂的生态系统。在这篇文章中，我们将深入探讨 2024 年你的 React 项目可用的众多库！ ![1_YOOMv2RW_RoH9WtOWVAZsw.webp](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/3ed0f1e9d322479ea3836fe041398caf~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1400&h=848&s=44122&e=webp&b=1d1d1d) ## 生态圈重要项目特点 1. Vite: - ✨ 适用于客户端渲染的 React 应用 - ✔️ 支持包括 React 和 TypeScript 在内的多个库 - 🚀 出色的性能 2. Next.js: - 🌐 适用于服务器端渲染的 React 应用 - 🔄 进化以支持静态站点生成和更多渲染模式 - 🆕 2023: 引入 React Server Components，实现了突破性的范式转变 3. Astro: - 🌌 适合静态生成的 React 应用 - 🔄 兼容各种框架 - 🚀 优化的性能：最初仅交付 HTML 和 CSS 4. Nitro & Waku: - 🚀 适合探索新技术的 React 老兵 - 💡 Waku: 由 Zustand 创建者开发，支持 React Server Components ## 📦 包管理 1. npm: - 🌐 默认且广泛使用 - ✔️ 与 Node.js 安装捆绑 2. yarn: - 🚀 出色的替代品 - ⚙️ 为 React 提供稳固的包管理 3. pnpm: - ⚡ 更高性能的选择 - 🔄 相对较新但正在获得关注 Monorepo 考虑： - 🔄 如果管理多个相互依赖的 React 应用，请探索这一概念 - 🧰 在 npm、yarn 或 pnpm 中利用工作区功能 - 🚀 为了提高开发效率，考虑使用 yarn 或 pnpm - 🛠️ 使用 Turborepo 实现流畅的 monorepo 体验建议与指导： - 🤔 选择一个包管理器并坚持使用 - 🌐 默认且广泛使用 -> npm - ⚡ 改进性能，较新但日益流行 -> pnpm - 💼 对于 monorepo 需求，与 Turborepo 集成。 ## 🌐 React 状态精通：Hooks 及其它 1. 本地状态管理： - 🎣 利用 `useState` 和 `useReducer` 灵活处理组件内部状态。 - 🏠 对于共享状态，内建的 React Hooks 是你的首选。 2. 全局状态管理： - 🚀 使用 `useContext` 安全地从顶层向子组件传递属性。 - 💡 理想的全局状态在 React 内无缝管理方案。 3. Zustand 用于全局状态： - 🌍 如果频繁使用 React 的 Context 进行全局状态管理，考虑使用 Zustand。 - 🔧 Zustand 允许管理全局应用状态，可跨 React 组件访问状态。 4. Redux: - 🏆 仍然是 React 状态管理的最受欢迎选择。 - 🧰 探索 Redux Toolkit 以增强 Redux 体验。 5. 专业选择： - 🔄 如果对状态机感兴趣，请查看 XState 和 Zag。 - 🌐 对于替代的全局存储，考虑 Jotai、Recoil 或 Nano Stores。建议与指导： - 🏠 对于共享状态，依赖内建的 `useState`/`useReducer`。 - 🌍 如果需要全局状态管理，采用内建的 `useContext`。 ## 📊 在 React 中进行数据收集：选择正确的工具 1. 远程数据检索： - 🔄 对于 UI 状态，使用 React 的内建 Hooks。 - 🚀 对于远程数据，选择 TanStack Query 以实现高效的数据检索、缓存和乐观更新。 2. GraphQL 选项： - 🚀 TanStack Query（前身为 React Query）适用于 REST 和 GraphQL API。 - 🌐 考虑使用 Apollo Client（流行）、urql（轻量级）或 Relay（Facebook 开发）进行专门的 GraphQL 任务。 3. Redux 集成： - 🧰 为 Redux 用户无缝集成数据获取和状态管理，可使用 RTK Query。 4. 端到端 TypeScript 解决方案： - ⚙️ 对于全栈 TypeScript 开发，探索 tRPC 以实现类型安全的 API。 - 🚀 通过端到端类型安全提高前端和后端开发的效率和用户体验。建议的用法： - 🌐 使用 axios 或 fetch 与 TanStack Query 配合，适用于 REST 或 GraphQL API。 - 🚀 对于 GraphQL API，使用 Apollo Client。 - ⚙️ 对于紧密耦合的客户端-服务器架构，使用 tRPC。 ## 🛣️ 简化 React 路由 1. 使用框架时： - 🚀 如果使用 Next.js 或类似的 React 框架，路由已内建。 2. 不使用框架（客户端渲染）： - 🌐 对于强大的路由，选择 React Router。 - 🆕 探索 TanStack Router，专为 TypeScript 设计。 3. 代码拆分优化： - 🚀 在 React Router 中优化代码拆分时，考虑使用 @loadable/components 替代 React.lazy()。建议： - 🛤️ 最常用：React Router - 🚀 新兴趋势：TanStack Router - 📘 尤其适合一流的 TypeScript 支持。 ## ✨ 提升你的 React 样式 1. 初学者的基础样式： - 🎨 从 JSX 中使用样式对象的内联样式和简单 CSS 开始。 - 🚨 限制频繁使用内联样式以保持代码清洁。 ```jsx const Headline = ({ title }) =>

{title}

``` 2. 外部 CSS 文件： - 📁 将样式放在外部 CSS 文件中以便于维护。 - 📄 了解 CSS 模块以实现封装。 ```jsx import './Headline.css'; const Headline = ({ title }) =>

{title}

``` 3. 高级样式选项： - 💅 探索 CSS-in-CSS 解决方案，如 CSS 模块。 - 💡 考虑使用 Styled Components 等 CSS-in-JS 选项，以保持代码整洁、有序。 ```jsx import styles from './style.module.css'; const Headline = ({ title }) =>

{title}

import styled from 'styled-components'; const BlueHeadline = styled.h1` color: blue; `; const Headline = ({ title }) => {title} ``` 4. 实用优先方法： - 🚀 采用 Tailwind CSS 以提高效率和简化设计系统。 ```jsx const Headline = ({ title }) =>

{title}

``` 建议： - 🌟 实用优先：Tailwind CSS（最受欢迎） - 📁 CSS-in-CSS：CSS 模块 - 💡 CSS-in-JS：Styled Components 或 Facebook 的 StyleX - ⌨️ CSS-in-TS（支持 TypeScript 和服务器端渲染） ## 🛠️ 导航 React 组件库 1. 自制组件以学习： - 🧰 构建自定义组件是初学者极佳的学习经验。 - 📦 独立掌握下拉菜单、选择框、单选按钮和复选框的创建。 2. 现成的 UI 库： - 🏗️ 如果创建所有组件感觉压力山大，探索预构建的 UI 库。 - 🌈 Ant Design、Material UI、Mantine UI、Chakra UI、NextUI、Park UI 提供设计一致性和功能性。 3. 趋向无样式库： - 🚀 新的 UI 库采用无样式但功能齐全的方法。 - 🌐 shadcn/ui、Radix、React Aria、Catalyst、Daisy UI、Headless UI、Ark UI（Chakra UI 的兄弟）引领趋势。 4. 专用的 UI 库： - 🔄 对于强大的表格，考虑使用专门的库，如 react-table-library。 - 🎨 轻松与各种主题集成，如 Material UI，以增强功能性。突出的库： - 🌟 2023 年最受欢迎：shadcn/ui - 🚀 趋向无样式：Radix、React Aria、Catalyst、Daisy UI、Headless UI、Ark UI 注意： - 📦 现成的库提供设计一致性，但专用的库可能提供更强大的组件。 🚀 提升你的网页动画 1. CSS 基础： - 🌐 所有动画都以 CSS 为起点。 - 🔄 随着需求增长，探索超越 CSS 动画的高级选项。 2. 顶级 React 动画库： - 🎬 Framer Motion：高度推荐且多用途。 - 💫 react-spring：采用物理基础方法的动态动画。 - 🕺 react-motion：为 React 组件提供平滑、流畅的动画。 - 🔄 react-move：通过 React 组件启用动画。选择你的动效： - 🌟 Framer Motion：因其灵活性最受推荐。注意： - 🚀 随着你的动画需求发展，这些库提供了超越基本 CSS 动画的增强能力。 ## 📊 在 React 中制作可视化 1. 使用 D3 获得自定义灵活性： - 🎨 D3 是一个基础的可视化库，用于从零开始创建复杂图表。 - 🔄 提供广泛的工具，制作美观且定制化的图表。 2. 受欢迎的 React 图表库： - 📈 Echarts：具有强大组合能力的现成图表。 - 🌀 Recharts：创建和自定义图表的灵活选项。 - 🎯 visx：用于精确控制的低级 D3 功能。优势分析： - 🕰️ D3：学习耗时但提供终极灵活性。 - 🌐 Echarts、Recharts：提供可选定制的现成图表。 - 🚀 visx：利用低级 D3 功能进行详细控制。 3. 其他选项： - 🏆 Victory：功能丰富且可定制的 React 图表库。 - 🌈 nivo：多样化且现成的图表库。 - 📊 react-chartjs：用户友好且广泛采用。注意： - 📊 根据对灵活性、易用性和定制需求的偏好进行选择。 ## ✍️ 在 React 中简化表单 1. React Hook Form： - 🏆 React 中最受欢迎的表单库。 - 🛠️ 特性包括验证（常与 zod 集成）、表单提交和状态管理。建议集成： - 🔄 React Hook Form：与 zod 无缝集成，实现强大的验证。替代方案： - 📋 Formik：表单处理的可行替代方案。 - 🏁 React Final Form：另一个提供表单管理能力的选项。注意： - 🚀 选择最符合你的项目需求和偏好的库。 🔍 在 React 中探索类型检查 1. PropTypes（已弃用）： - 🔍 使用 PropTypes 进行内建属性验证。 - ⚠️ 在现代 React 中已弃用，但出于历史背景提及。 ```jsx import PropTypes from 'prop-types'; const List = ({ list }) => (

{list.map((item) => (

{item.title}

))}

); List.propTypes = { list: PropTypes.array.isRequired, }; ``` 2. 适用于现代 React 的 TypeScript： - 🔧 现代 React 中类型检查的行业标准。 - 🌟 由于增强的类型支持，推荐用于新项目。 ```jsx type Item = { id: string; title: string; }; type ListProps = { list: Item[]; }; const List = ({ list }: ListProps) => (

{list.map((item) => (

{item.title}

))}

); ``` 3. 使用 Zod 进行高级类型验证： - 🚀 对于高级类型验证，考虑使用 Zod。 - 🔄 特别适用于类型化的表单验证、使用 tRPC 的 API 验证等。建议： - 🛠️ 如果你需要 JavaScript 类型，使用 TypeScript。 ## 🛠️ 打造干净的 React 代码库 1. 使用 ESLint 保持代码标准： - 🚦 采用 ESLint 强制执行编码标准。 - 📘 使用 Airbnb 等流行的风格指南进行配置，以保持代码一致性。 2. 使用 Prettier 进行自动格式化： - 🔄 使用 Prettier 自动格式化代码。 - 💻 与编辑器集成，确保保存时代码格式一致。 3. 协同配对： - 🔧 ESLint 专注于错误检查和问题预防。 - 🎨 Prettier 强调一致性和可读性的代码格式化。 4. 新兴工具： - 🌱 注意新兴工具如 Biome（前身为 Rome），用于全面的代码检查和格式化。建议： - 🛠️ ESLint + Prettier：结合使用，提升代码质量和开发效率。 - 🚀 给 Biome 一个机会：对编码领域的新工具保持开放态度。 ## 🔐 在 React 中简化认证 1. 超出 React 范围： - 🚀 React 主要处理 UI，认证逻辑通常基于后端。 - 🌐 认证功能包括注册、登录、登出、密码重置和更改。 2. 后端即服务（Backend-as-a-Service）解决方案： - 🚀 利用认证/后端即服务解决方案实现无缝集成。探索选项，如： - 🌟 Lucia - 🌟 Supabase Auth - 🌟 Clerk - 🌟 AuthKit - 🌟 NextAuth - 🌟 Firebase Auth - 🌟 Auth0 - 🌟 AWS Cognito 注意： - 🛠️ 选择与项目需求、可扩展性和集成便利性相符的解决方案。 🚀 React 服务器端：选择合适的后端 1. 全栈魔法的元框架： - 🌐 采用 Next.js、Astro 或 Remix 等元框架，为综合性 React 项目提供全面支持。 - 🛠️ 这些框架为构建全栈应用提供完整解决方案，利用 React 的强大能力。 2. JavaScript/TypeScript 后端选项： - 🔄 如果全栈框架不可行，考虑使用 tRPC 或 Hono 与 React 无缝集成。 - 💻 两者都提供与 JavaScript/TypeScript 兼容的强大后端解决方案。 3. 传统后端框架： - 🚦 为了稳定性和成熟度，Express 仍然是高度推荐的选择。 - 🚀 探索如 Fastify 和 Nest.js 等替代方案，获得强大功能和后端灵活性。注意： - 🌈 根据项目需求选择后端解决方案，无论是元框架、JavaScript/TypeScript 后端还是传统后端框架。 ## 🗃️ 在全栈 React 中集成数据库 1. Next.js 中的对象关系映射（ORM）： - 🔄 在 Next.js 应用中，探索如 Prisma 等 ORM 以实现与数据库的无缝交互。 - 🌟 考虑替代方案，如 Drizzle ORM、Kysely 和 database-js（仅限 PlanetScale）。 2. 受欢迎的数据库提供商： - 🚀 Supabase：提供 PostgreSQL，既有自托管又有付费服务。 - 🔥 Firebase：广泛使用的数据库提供商。 3. 无服务器数据库解决方案： - 🌐 对于无服务器数据库，探索如 PlanetScale、Neon 和 Xata 等选项。注意： - 🌈 根据项目需求和偏好选择数据库解决方案。无论是 Next.js 的 ORM、受欢迎的数据库提供商，正确的选择取决于你的具体需求。 🧪 导航 React 测试 1. 测试框架核心： - 🏗️ Jest 是测试 React 应用的基石，提供测试运行器、断言库和全面的测试功能。 - 🚀 Vitest 是为 Vite 用户量身定制的 Jest 替代品。 2. 使用 react-test-renderer 进行快照测试： - 📸 在 Jest 或 Vitest 中使用 react-test-renderer 进行快照测试。 - 🔄 捕获并比较渲染 DOM 元素的快照，以跟踪组件变化。 3. React Testing Library (RTL)： - 🧰 逐渐过渡到 React Testing Library (RTL)，以获得更强大的测试体验。 - 🌐 RTL 支持在测试框架环境中渲染组件、模拟事件和进行断言。 4. 端到端 (E2E) 测试工具： - 🌐 对于 React 应用的 E2E 测试，考虑使用 Playwright 或 Cypress 作为受欢迎和可靠的选择。建议使用的工具： - 🧪 单元/集成测试：Vitest + React Testing Library（最受欢迎）。 - 📸 快照测试：Vitest。 - 🌐 E2E 测试：Playwright 或 Cypress。注意： - 🚀 根据测试需求选择测试工具，确保一个强大且高效的测试环境。 ## 结论 React 生态系统就像为 React 量身定制的框架，但它保留了使 React 脱颖而出的灵活性。这是一个多功能的设置，你可以像建筑师一样挑选和选择适合你需求的库。从小处开始，只添加解决特定问题的库![GPT](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/84ce2cfad2a54f7187651bbfab1cc1d6~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=512&h=512&s=230412&e=png&b=fcf9e7) 在另一方面，如果你只是渴望 React 的简洁性，那么继续保持轻巧吧！在使用 React 开发过程中，选择合适的工具和库对于提高开发效率、保证代码质量和实现项目目标至关重要。无论是代码规范、认证流程、后端选择还是数据库集成，每一步都应该基于项目的具体需求和团队的偏好来决定。通过精心选择工具和库，你可以构建一个既强大又灵活的 React 应用，不仅能够满足当前的需求，还能够适应未来的变化。记住，最好的工具是那些能够帮助你更有效率、更轻松地达到目标的工具。最后，不要忘记定期回顾和评估你的选择。随着技术的发展和项目需求的变化，可能会出现更适合的新工具或库。保持开放和灵活的态度，随时准备探索新的可能性，这是持续提升 React 开发体验的关键。祝你在构建干净、高效且响应迅速的 React 应用过程中取得成功！🚀