2023 年的 React 生态

React 是用于构建用户界面的JavaScript库，其核心是让开发者能够使用函数组件创建组件驱动的用户界面。它带有一些内置解决方案，例如，用于本地状态、副作用和优化性能的 React Hooks，但这些只能处理函数（组件和Hook）以创建 UI。React 拥有一个庞大的生态系统，可以帮助开发人员更快地实现复杂的UI。本文就来看看 React 最新的生态系统，以实现快速技术选型！

创建项目

在 React 社区中，最受欢迎的创建 React 项目的工具就是 Vite，它允许使用各种库（例如 React）+ 可选的 TypeScript 组合创建项目，它具有强大的性能。

如果你已经熟悉 React，可以选择最流行的（元）框架之一 Next.js 作为替代，它建立在 React 之上。 这个领域中另一个流行但较新的框架是 Remix。

虽然 Next.js 最初用于服务端渲染（Web 应用），但它也可用于静态站点生成。 但是，如果正在寻找一个考虑到静态内容最佳性能的框架，可以考虑使用 Astro，它与框架无关，因此可以与 React 一起使用。

建议：

• Vite：用于客户端 React 应用；
• Next.js ：用于服务器端渲染的 React 应用；
• Astro：用于静态站点生成的 React 应用。

包管理器

JavaScript 生态系统（以及 React）中默认且使用最广泛的包管理器就是 npm。 在 React 应用中安装依赖项时，通常会使用 npm。 然而，在过去几年中，yarn 一直是一个成功的替代品。 另外，pnpm 是一个最新的替代品，它带来了巨大的性能提升。

如果碰巧创建了多个相互依赖或共享一组通用自定义 UI 组件的 React 应用，可能需要了解 monorepo 的概念。前面提到的所有包管理器都允许开发者使用其内部工作区功能创建 monorepos。但是，使用 yarn/pnpm 可以获得最好的开发体验。 结合 Turborepo 等 monorepo 工具，monorepo 体验变得更完美。

建议

• 选择一个包管理器并坚持使用；
• npm：默认且使用最广泛；
• 如果是 monorepo，使用 Turborepo。

状态管理

React 提供了两个内置的 Hook 来管理本地状态：useState 和 useReducer。如果需要全局管理状态，可以选择使用 React 内置的 useContext Hook，在不使用 props 的情况下将 props 从顶级组件传递到下面的组件，从而避免 props drilling 的问题。这三个 hooks 使开发人员能够在 React 中实现强大的状态管。

如果需要过于频繁地使用 React 的 Context 来处理共享/全局状态，那么可以考虑使用最流行的状态管理库：Redux。 它可以管理全局应用状态，可以由连接到其全局 store 的任何 React 组件进行读取和修改。如果使用 Redux，可以了解一下 Redux Toolkit。它在 Redux 的核心之上提供了一个很棒的 API，极大地改善了开发人员使用 Redux 的体验。

作为替代方案，如果喜欢全局存储的总体思路但不喜欢 Redux 的实现方式，可以使用其他流行的本地状态管理解决方案，例如 Zustand、Recoil、XState 或 Jotai。

建议

• useState/useReducer：用于本地状态管理；
• useContext：用于小的全局状态管理；
• Redux：用于大的全局状态管理（或替代方案）。

数据获取

React 的内置 Hook 非常适合 UI 状态，但是当涉及到远程数据的状态管理（以及数据获取）时，建议使用专用的数据获取库&