【前端】一个”哇塞“前端需要知道的 React 生态清单 ~

最近在做一个自己的知识库，希望对自己的知识体系做一个彻底的梳理和整理，以便制定今后的学习计划和方向。下面就分享一下我自己整理的整个 React 知识体系和各生态当前最热门的实践 ~

要成为一个精通 React 的 "哇塞" 前端，不仅需要全面掌握 React 的基础概念，同时还需要熟练运用相关的技术生态和工具。虽然 React 只是一个基于 UI 层面的库，但是整个 React 生态其实是很繁荣的，真正要 "精通" React 实际上并没有那么容易，需要具备一个完整的体系化知识结构 ~

1、核心 APIs

• createContext：createContext 可以创建一个上下文，组件可以提供或读取该上下文。

• createPortal：可让你将某些子组件渲染到 DOM 的不同部分。

• forwardRef：forwardRef 可让你的组件通过 ref 向父组件暴露 DOM 节点。

• Fragment：<Fragment> 通常通过<>...</>语法使用，可让你在不使用包装节点的情况下对元素进行分组。

• lazy：lazy 可以让你延迟加载组件的代码，直到首次渲染时才加载。

• memo：memo 可让你在组件的 props 不变时跳过重新渲染组件。

• Profiler：<Profiler> 可让你以编程方式测量 React 树的渲染性能。

• StrictMode：<StrictMode> 可让你在开发过程中尽早发现组件中的常见错误。

• Suspense：可让你在其子模块加载完成前显示回退模块。

2、React Hooks

• useState

• useReducer

• useEffect

• useLayoutEffect

• useCallback

• useMemo

• useContext

• useRef

• useImperativeHandle

• useDebugValue

• useDeferredValue

• useId

• useInsertionEffect

• useSyncExternalStore

• useOptimistic

• useTransition

3、新 APIs

• React Server Components：只在服务器上运行的组件。

• Server Actions：React 内置的服务器突变解决方案。

• React cache - 实验中：缓存可让你缓存数据获取或计算的结果。

  • 缓存仅用于 React Server Components。请参见支持 React Server Components 的框架。
  • 缓存仅在 React 的 Canary 和实验频道中可用。在生产中使用缓存之前，请确保您了解其限制。点击此处了解有关 React 发布渠道的更多信息。

• Suspense：可让你在其子模块加载完成前显示回退模块。

• Taint API：防止特定对象或值传递给客户端组件。只在 RSC 中使用。

  • experimental_taintObjectReference
  • experimental_taintUniqueValue

• use：可让你读取 Promise 或上下文等资源的值。

• useFormState：可以根据表单操作的结果更新状态。

• useFormStatus：提供上次提交表单的状态信息。

• startTransition：可以让你在不阻塞用户界面的情况下更新状态。

• useTransition：是一个 React hooks，可让你在不阻塞用户界面的情况下更新状态。

• use-client：让你可以标记在客户端运行的代码。

• use-server：让你可以标记在服务端运行的代码。

4、生态周边

4.1 UI 库

• Ant Design

• Chakra UI：Chakra UI 是一个简单、模块化和可访问的组件库。

• MUI

• React Bootstrap

• Headless UI

• Radix

• shadcn/ui

• React Aria

4.2 样式方案

• CSS Modules

• Sass/SCSS

• Styled Components

• Emotion

• Tailwind CSS

• UnoCSS

• vanilla-extract

• Stitches

• Styled JSX

4.3 状态管理方案

• Redux / Redux Toolkit

• Zustand

• MobX

• Jotai

• Recoil

• XState

4.4 数据管理方案

• TanStack Query (React Query)

• RTK Query

• SWR

• Relay

• tRPC

4.5 动画库

• Framer Motion

• React-Spring

• AutoAnimate

• React Magic Motion

• React Motion

4.6 可视化和图形库

• D3

• Nivo

• React-Vis

• Recharts

• Tremor

• Victory

• Visx

4.7 表单

• React Hook Form

• react-jsonschema-form

• Formik

• @formily/core

5、构建工具

• webpack

• Rspack

• Vite

• esbuild

• Rollup

• Parcel

• Turbopack

• tsup

• tsc CLI

6、startup / 全栈框架

• Next.js

• Remix

• Astro

• Gatsby

• create-react-app

• Redwood

7、测试框架

• Cypress

• Jest

• Playwright

• Storybook

• Testing Library

• Vitest

8、数据校验库

• joi

• Zod

• Yup

• io-ts

9、前沿方向

• 边缘渲染（Edge Rendering）：在发送给客户端之前在边缘服务器 (Edge) 修改渲染的 HTML。

• 增量静态生成（ISG：Incremental Static Generation）：即使在初始构建之后，也能动态增强或修改静态网站 (Next.js ISR, Gatsby DSG)

• 岛屿架构（Islands Architecture）：在一个静态网站中，通过多个入口点实现动态行为的孤岛 (Astro, Eleventy)

• 多页面应用 (MPA：Multi-Page Application)：完全在服务器上运行的应用程序，客户端动态行为极少

• 局部注水（Partial Hydration）：只在客户端上对某些组件进行注水 (比如 React Server Components)

• 渐进式增强（Progressive Enhancement）：确保应用程序在没有 JavaScript 的情况下也能正常运行

• 渐进式注水（Progressive Hydration）：控制在客户端上的对组件注水的顺序

• Resumability：在服务器上序列化框架状态，使客户端能够在没有重复代码执行的情况下恢复执行。

• 服务端渲染 (SSR：Server-Side Rendering)：在服务器上动态渲染 HTML 内容，然后再在客户端上重新"注水"

• 单页面应用 (SPA：Single Page Application)：完全在浏览器中运行的应用

• 静态站点生成 (SSG：Static Site Generation)：预渲染静态内容，可能会携带客户端动态元素

• 流式服务端渲染（Streaming SSR）：将服务器渲染的内容分解为较小的流式块

10、new Features（on the way）

• Asset Loading：Fully integrate Suspense with the loading lifecycle of stylesheets, fonts, and images

• React cache：An API to assist with caching data.

• React Forget

• Offscreen Rendering

• React Server Components

• Server Actions

• <Suspense>

• Transition Tracing：Detect when React Transitions become slower and investigate why they may be slow.

• use()：Hookuse unwraps the value of a promise, but it can be used inside normal components and Hooks, including on the client.

---