本文翻译自： The React Ecosystem in 2023
- 预览：
随着 React 于 2023 年庆祝成立 10 周年，该生态系统随着不断的进步和创新而继续蓬勃发展。作为使用最广泛的 JavaScript 库之一，React 仍然是开发人员构建动态和高性能应用程序的最爱。
然而，React 生态系统中有大量可用的工具和库，为您的项目选择正确的组合可能具有挑战性。在本文中，我们将探索开发人员广泛使用和信任的最基本的库，并帮助您就用于下一个 React 项目的正确工具做出明智的决定。
对于 React 新手来说，入门可能是一项艰巨的任务。有几种不同的开始方法，这些方法可能会令人困惑。
如果您是 React 新手，或者只是想在不设置项目的情况下使用它，则可以使用在线沙箱，例如CodeSandbox或StackBlitz。这些沙箱提供了一个虚拟环境，您可以在其中编写和测试 React 代码，而无需在计算机上安装任何内容。
除了在线沙箱之外，一个流行的选择是Vite，它是一个构建工具，可为现代 Web 项目提供快速、轻松的开发体验。Vite 开箱即用地支持 React，这意味着您可以快速设置 React 项目，而无需手动配置构建过程。运行以下命令并按照提示操作！
npm create vite@latest
React 入门的另一个流行选择是Next.js，它是一个构建在 React 之上的框架。Next.js 提供了一组强大的功能，包括自动代码分割、服务器端渲染、静态站点生成等。Next.js 非常适合构建需要服务器端渲染和 SEO 优化的复杂应用程序。开始使用 Next.js 的最简单方法是使用 create-next-app. 它是一个 CLI 工具，可让您快速开始构建新的 Next.js 应用程序，并为您做好一切设置。
npx create-next-app@latest
在线沙箱试水
Vite适合中小型项目
Next.js适用于需要 SSR 和 SEO 优化的项目
路由是任何现代 Web 应用程序的重要组成部分，并且有许多优秀的路由库可用于处理复杂的路由逻辑并创建动态的单页应用程序 (SPA)。
React 最流行的路由库之一是React Router。React Router 提供了一种简单的声明式方式来处理 React 应用程序中的路由，因此您可以定义路由并根据当前 URL 渲染不同的组件。
以下是设置根路由和/about路由的示例代码片段，每个路由呈现不同的内容：
const router = createBrowserRouter([
{
path: "/",
element: (
<div>
<h1>Hello World</h1>
<Link to="about">About Us</Link>
</div>
),
},
{
path: "about",
element: <div>About</div>,
},
]);
TanStack Router是一个新成员。它功能丰富且轻量级，但与 React Router 相比使用量相对较小。如果您遇到仅在 TanStack Router 中存在的特定功能，您可能想尝试一下。这里有一个比较表可以帮助您做出决定。
如果您使用 Next.js，则无需选择路由库，因为Next.js 内置了路由。
用于在没有框架路由器的情况下构建 SPA 的React Router
***********Next.js*************如果您需要包含 SSR 和/或 SSG 的完整框架路由器
随着应用程序的增长，更加有意识地了解状态的组织方式以及数据在组件之间的流动方式会有所帮助。状态管理库可以更轻松地管理复杂的应用程序状态并使您的 UI 与数据保持同步。
一个流行的 React 状态管理库是Redux Toolkit。Redux Toolkit 是一组用于高效管理状态的工具和最佳实践。它提供了用于定义和更新状态的简化 API，以及对不可变更新、可序列化操作类型等功能的内置支持。
Redux Toolkit 还包含许多附加功能，例如用于处理异步逻辑的内置 Thunk 中间件，以及用于调试 Redux 状态的 DevTools 扩展。
以下是 redux 切片的代码片段，它是应用程序中单个功能的 redux 逻辑和操作的集合：
import { createSlice } from '@reduxjs/toolkit'
const initialState = {
value: 0,
}
export const counterSlice = createSlice({
name: 'counter',
initialState,
reducers: {
increment: (state) => {
state.value += 1
},
decrement: (state) => {
state.value -= 1
},
incrementByAmount: (state, action) => {
state.value += action.payload
},
},
})
// Action creators are generated for each case reducer function
export const { increment, decrement, incrementByAmount } = counterSlice.actions
export default counterSlice.reducer
Zustand是 React 的另一个状态管理库，它为管理应用程序中的状态提供了清晰且轻量级的解决方案。Zustand 提供了用于订阅状态更改的内置机制，因此您可以轻松地使 UI 与数据保持同步。
对于想要轻量级且易于使用的状态管理解决方案而又不想使用 Redux 等大型库的开销的开发人员来说，这是一个不错的选择。
以下是使用 Zustand 的简单增量计数器的代码片段：
import { create } from 'zustand'
const useStore = create((set) => ({
count: 1,
inc: () => set((state) => ({ count: state.count + 1 })),
}))
function Counter() {
const { count, inc } = useStore()
return (
<div>
<span>{count}</span>
<button onClick={inc}>one up</button>
</div>
)
}
Redux Toolkit用于提供功能更齐全的解决方案，具有更大的 API 和对附加功能的内置支持。
Zustand提供轻量级且简单的解决方案，易于使用且不需要太多样板代码。
服务器状态管理是指对存储在服务器上并由客户端应用程序远程访问的数据的管理。该数据可以包括用户身份验证详细信息、数据库记录和其他后端数据。要管理 React 应用程序中的服务器状态，有几个可用的库。
最流行的是TanStack Query，它提供了一种直观且强大的方法来管理 React 应用程序中的服务器状态。它提供了一个缓存层，可以自动管理数据的状态，根据需要获取和更新数据。
该库还提供了许多内置功能，例如自动重新获取、轮询和分页，从而可以轻松处理复杂的数据集。
以下是查询 API 并在函数组件中处理返回响应的示例代码片段：
function GitHubStats() {
const { isLoading, error, data, isFetching } = useQuery({
queryKey: ["repoData"],
queryFn: () =>
axios
.get("https://api.github.com/repos/gopinav/react-query-tutorials")
.then((res) => res.data),
});
if (isLoading) return "Loading...";
if (error) return "An error has occurred: " + error.message;
return (
<div>
<h1>{data.name}</h1>
<p>{data.description}</p>
<strong>👀 {data.subscribers_count}</strong>{" "}
<strong>✨ {data.stargazers_count}</strong>{" "}
<strong>🍴 {data.forks_count}</strong>
<div>{isFetching ? "Updating..." : ""}</div>
</div>
);
}
SWR是另一个流行的库，用于管理 React 应用程序中的服务器状态。“SWR”这个名字来源于 HTTP RFC 5861stale-while-revalidate流行的一种缓存失效策略 。与 TanStack Query 相比，SWR 确实存在一些功能限制。
如果您使用 Redux Toolkit 进行客户端状态管理，Redux Toolkit Query是无缝管理服务器状态的绝佳选择。
Apollo Client是另一个流行的库，用于管理 React 应用程序中的服务器状态。它特别适合使用 GraphQL API。
REST API 的Tanstack 查询
GraphQL 的Apollo 客户端
处理表单可能是一项乏味且容易出错的任务，但现在有许多优秀的表单处理库可用于 React。一些最受欢迎的选项包括Formik和React Hook Form。这些库使表单验证、提交和错误处理变得更加容易。
虽然 Formik 提供了一个直观的 API 来管理表单状态、验证输入和提交数据，但该库并未得到积极维护。
React Hook Form 应该成为 2023 年处理表单的首选库。它轻量、快速且易于使用。React Hook Form 利用 React hooks 的强大功能来管理表单状态和验证规则。它还提供了用于构建表单的灵活 API，并允许您轻松与Yup和Zod等其他库集成以进行验证。
与 Formik 不同，React Hook Form 不需要大量样板代码，可以显着减少处理表单数据所需的代码量。此外，React Hook Form 具有出色的性能，因为组件不会因字段值的每次变化而重新渲染。
以下是接受用户名字和姓氏的 React hook 表单的示例代码片段：
import { useForm } from "react-hook-form";
export default function App() {
const { register, handleSubmit, watch, formState: { errors } } = useForm();
const onSubmit = data => console.log(data);
return (
/* "handleSubmit" will validate your inputs before invoking "onSubmit" */
<form onSubmit={handleSubmit(onSubmit)}>
{/* register your input into the hook by invoking the "register" function */}
<input {...register("firstName")} />
{/* include validation with required or other standard HTML validation rules */}
<input {...register("lastName", { required: true })} />
{/* errors will return when field validation fails */}
{errors.lastName && <span>This field is required</span>}
<button>Submit</button>
</form>
);
}
使用 Yup/Zod 来React Hook Form以获得高性能、灵活和可扩展的表单，并具有易于使用的验证。
测试是构建高质量 React 应用程序的重要组成部分。在测试 React 应用程序时，需要考虑的两个绝佳选择是用于单元测试的Vitest和React 测试库以及用于端到端测试的Playwright或Cypress 。
Vitest 是一个由 Vite 提供支持的超快单元测试框架。在测试 React 应用程序的上下文中，它是一个测试运行程序，用于查找测试、运行测试、确定测试是否通过或失败，并以人类可读的方式报告。
React 测试库是一个 JavaScript 测试实用程序，它提供虚拟 DOM 来测试 React 组件。通过自动化测试，没有实际的 DOM 可以使用。React 测试库提供了一个虚拟 DOM，我们可以使用它来与 React 组件交互并验证其行为。
Playwright 和 Cypress 是提供可靠且强大的方法来端到端测试 React 应用程序功能的库。您可以编写测试来模拟现实世界中的用户与应用程序的交互，包括单击、键盘输入和表单提交。他们还拥有优秀的文档和活跃的社区。
Vitest + React 测试 库，用于对软件的使用方式进行单元测试
Playwright 或 Cypress进行端到端测试
样式是构建现代 Web 应用程序的一个重要方面。React 有如此多的样式库可供使用，为您的项目选择合适的样式库可能会让人不知所措。这里有一些流行的样式库，可以帮助您创建美观且响应灵敏的用户界面。
Tailwind CSS是一个实用程序优先的 CSS 框架，它提供了一组用于构建 UI 组件的预定义类。使用 Tailwind CSS，您可以快速创建复杂的布局和自定义样式，而无需从头开始编写 CSS。它拥有优秀的文档和活跃的社区，使其成为寻求创建现代、响应式 UI 的开发人员的首选。
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
Button
</button>
Styled Components是一个流行的库，用于使用 CSS-in-JS 设计 React 组件的样式。它允许您直接在 JavaScript 代码中编写 CSS，从而轻松创建仅限于各个组件的动态样式。样式化组件还对主题提供出色的支持，允许您在应用程序的不同样式之间快速切换。
import styled from 'styled-components';
const Button = styled.button`
background-color: #3f51b5;
color: #fff;
font-weight: bold;
padding: 8px 16px;
border-radius: 4px;
cursor: pointer;
&:hover {
background-color: #303f9f;
}
`;
export default Button;
Emotion是另一个 CSS-in-JS 库，它为 React 组件的样式提供了强大的 API。它具有高性能，允许您使用多种语法定义样式，包括 CSS、Sass 和 Less。
import { css } from '@emotion/react';
const buttonStyles = css`
background-color: #3f51b5;
color: #fff;
font-weight: bold;
padding: 8px 16px;
border-radius: 4px;
cursor: pointer;
&:hover {
background-color: #303f9f;
}
`;
const Button = () => (
<button css={buttonStyles}>
Button
</button>
);
export default Button;
CSS 模块是 React 中一种流行的样式设计方法，它允许您编写适用于各个组件的模块化 CSS 代码。使用 CSS 模块，您可以编写仅应用于特定组件的 CSS 类，从而防止命名冲突并确保样式得到正确封装。
在 CSS 模块方法中，您需要创建一个单独的 CSS 文件 - 例如Button.module.css- 包含以下内容：
import styles from './Button.module.css';
const Button = () => (
<button className={styles.button}>
Button
</button>
);
export default Button;
.button {
background-color: #3f51b5;
color: #fff;
font-weight: bold;
padding: 8px 16px;
border-radius: 4px;
cursor: pointer;
}
.button:hover {
background-color: #303f9f;
}
Vanilla Extract由 CSS Modules 的联合创建者 Mark Dalgleish 发起，是最新获得关注的 CSS-in-JS 库之一。它提供了一个轻量级、零运行时的解决方案，用于设置 React 组件的样式，并具有完整的 TypeScript 支持。它在构建时提供静态 CSS 生成，从而提高性能并减小包大小。如果您更喜欢 TypeScript 优先的方法并重视性能，Vanilla Extract 可能是设计 React 应用程序的绝佳选择。
import { style } from '@vanilla-extract/css';
// Define styles
const buttonStyles = style({
backgroundColor: '#3f51b5',
color: '#fff',
fontWeight: 'bold',
padding: '8px 16px',
borderRadius: '4px',
cursor: 'pointer',
':hover': {
backgroundColor: '#303f9f',
},
});
const Button = () => (
<button className={buttonStyles}>
Button
</button>
);
export default Button;
UI 组件库可以为 React 开发人员节省大量时间，而且现在有许多优秀的选项可用。一些最受欢迎的选项包括：
还有 Tailwind CSS 框架，例如：
适用于大型社区的Material UI和出色的 Figma 套件
Mantine UI是一颗冉冉升起的新星
用于 Tailwind CSS 的ShadCN
动画可以成为创建引人入胜的交互式用户界面的强大工具，并且有许多优秀的动画库可用于 React。一些最受欢迎的选项包括React Spring和Framer Motion。这些库可以使用最少的代码轻松创建流畅且响应灵敏的动画。
以下是使用 Framer Motion 的示例代码片段。Motion的核心是 运动组件。将其视为带有动画功能的纯 HTML 或 SVG 元素。为组件设置动画 motion 就像在 animate prop上设置值一样简单。
import { motion } from "framer-motion";
export default function App() {
return (
<motion.div
className="box"
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
/>
);
}
Framer Motion提供了经过深思熟虑的 API，用于创建强大的动画。
数据可视化是许多 React 应用程序的重要组成部分，尤其是那些依赖复杂数据集的应用程序。React 的一些流行数据可视化库包括：
这些库最大限度地减少了创建美观的交互式可视化的学习曲线，可以帮助用户理解复杂的数据。
下面是使用 Recharts 呈现折线图的示例代码片段：
import { LineChart, Line } from 'recharts';
const data = [{name: 'Page A', uv: 400, pv: 2400, amt: 2400}, ...];
const renderLineChart = (
<LineChart width={400} height={400} data={data}>
<Line type="monotone" dataKey="uv" stroke="#8884d8" />
</LineChart>
);
Recharts是一个很棒的库，可用于开始使用大量可能的可视化。
在 React 中实现表可能是一个具有挑战性的组件，但是有许多优秀的表库可用。一些流行的选项包括：
这些库可以轻松创建具有排序、过滤和分页等功能的强大且可自定义的表格。
TanStack Table多年来一直是首选
为了减少仅仅为了对站点或应用程序进行内容更新而更新和部署代码的需要，您需要使用无头 CMS。
我们建议将Builder.io与 React 结合使用，因为它扩展了结构化数据编辑，并允许直接使用组件进行可视化编辑，这可以显着减少对网站或应用程序的内容密集部分进行硬编码的需要。
以下是集成的示例：
import { Builder, BuilderComponent, builder } from '@builder.io/react'
// Dynamically render compositions of your components
// https://www.builder.io/c/docs/quickstart
export default function MyPage({ builderJson }) {
return <>
<Header />
<BuilderComponent model="page" content={builderJson} />
<Footer />
</>
}
// Fetch Builder.io content from the content API
// https://www.builder.io/c/docs/content-api
export async function getStaticProps({ params }) {
// Query content from the CMS https://www.builder.io/c/docs/querying
const content = await builder.get('page', { url: '/' }).promise()
return { props: { builderJson: content || null } }
}
// Register your components for user in the visual editor
// // https://www.builder.io/c/docs/custom-components-setup
Builder.registerComponent(MyHeadingComponent, {
name: 'Heading',
// Define which props are editable
inputs: [{ name: 'text', type: 'string', defaultValue: 'Hello world' }]
})
编辑 UI 是什么样的：
国际化 (i18n) 是许多应用程序的重要考虑因素，尤其是那些面向全球受众的应用程序。i18next和React-Intl等库可帮助将您的应用程序翻译成多种语言并处理本地化。
我们的建议包括：
开发工具可以为 React 开发人员提供巨大的帮助，并且有许多优秀的选项可用。一些流行的选项包括：
类型检查可以帮助捕获错误并提高 React 应用程序的可靠性。TypeScript是您的选择。
创建一个精简高效的开发环境对于 React 开发人员来说非常重要。查看故事书。
文档是任何软件项目的重要组成部分。对于创建文档应用程序， Docusaurus是一个非常好的选择。当然，您也可以将 Next.js 与Nextra等库一起使用。
React Native已成为使用 React 构建本机移动应用程序的越来越流行的选择。React Native 允许开发人员使用 React 和本机组件创建跨平台移动应用程序。
除了上面列出的库和工具之外，还有许多其他很棒的库可供 React 开发人员使用。一些流行的选项包括：
- 用于拖放功能的dnd 套件
- React-slick用于构建轮播和滑块
- 用于文件上传的react-dropzone。
这些库可以帮助简化 React 应用程序的开发并改善用户体验。
React 生态系统在 2023 年将继续快速发展和增长，有许多优秀的工具和库可用于构建高质量的 React 应用程序。无论您是刚刚开始使用 React 还是经验丰富的 React 开发人员，都有许多选项可以帮助您保持工作效率并构建出色的用户体验。
466
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
