781 字
4 分钟
开发资源库收集

📋 目录导航#

  1. URL 状态管理 (1)

    1. nuqs
  2. 状态管理 (3)

    1. Zustand
    2. Jotai
    3. Valtio
  3. 路由 (2)

    1. TanStack Router
    2. React Router
  4. UI 组件库 (3)

    1. shadcn/ui
    2. Radix UI
    3. Headless UI
  5. 表单处理 (3)

    1. React Hook Form
    2. Formik
    3. Zod
  6. 数据获取 (2)

    1. TanStack Query
    2. SWR
  7. 动画 (2)

    1. Framer Motion
    2. React Spring
  8. 工具函数 (3)

    1. Lodash
    2. Zod
    3. date-fns
  9. 工具类 (3)

    1. clsx
    2. class-variance-authority
    3. zod
  10. 开发工具 (3)

    1. Storybook
    2. Vitest
    3. Playwright
  11. 构建工具 (2)

    1. Vite
    2. Turbopack
  12. 其他 (2)

    1. React Error Boundary
    2. React DevTools

URL 状态管理#

nuqs#

类型安全的 URL 状态管理库,用于 React 和 Next.js。支持将状态同步到 URL 查询参数,提供类型安全的 API。


状态管理#

Zustand#

轻量级、无样板代码的状态管理库。API 简洁,性能优秀,适合中小型应用。

Jotai#

基于原子化状态管理的 React 状态库。采用自底向上的方式,支持细粒度更新。

Valtio#

基于 Proxy 的响应式状态管理库。可以直接修改对象,自动触发更新。


路由#

TanStack Router#

类型安全、功能强大的 React 路由库。支持类型推断、代码分割、数据加载等高级特性。

React Router#

React 最流行的路由库,功能完善,生态丰富。


UI 组件库#

shadcn/ui#

基于 Radix UI 和 Tailwind CSS 的组件库。可复制粘贴到项目中,完全可定制。

Radix UI#

无样式、可访问性优秀的组件原语库。提供基础组件,样式完全由开发者控制。

Headless UI#

无样式、完全可访问的 UI 组件库。由 Tailwind CSS 团队开发。


表单处理#

React Hook Form#

高性能、灵活的表单库。减少重渲染,API 简洁,性能优秀。

Formik#

流行的 React 表单库,功能全面,生态丰富。

Zod#

TypeScript 优先的模式验证库。可以与 React Hook Form 完美配合。


数据获取#

TanStack Query#

强大的数据同步库。提供缓存、后台更新、无限滚动等功能。

SWR#

由 Vercel 开发的数据获取库。轻量级,支持实时数据同步。


动画#

Framer Motion#

强大的 React 动画库。API 简洁,支持复杂的动画效果。

React Spring#

基于物理的动画库。提供流畅、自然的动画效果。


工具函数#

Lodash#

JavaScript 工具库,提供大量实用的工具函数。

Zod#

TypeScript 优先的模式验证库,也可以用于类型推断。

date-fns#

现代 JavaScript 日期工具库。轻量级、模块化、不可变。


工具类#

clsx#

用于构造 className 字符串的工具函数。轻量级、快速。

class-variance-authority#

用于构建类型安全的变体组件。与 Tailwind CSS 配合使用效果很好。

zod#

TypeScript 优先的模式验证库,也可以用于运行时类型检查。


开发工具#

Storybook#

用于构建 UI 组件的开发工具。支持组件隔离开发、文档生成等。

Vitest#

基于 Vite 的快速单元测试框架。与 Vite 配置完全兼容。

Playwright#

端到端测试框架。支持多浏览器、自动等待、网络拦截等功能。


构建工具#

Vite#

下一代前端构建工具。开发服务器启动快,HMR 速度快。

Turbopack#

由 Next.js 团队开发的 Rust 构建工具。性能极佳。


其他#

React Error Boundary#

React 内置的错误边界功能,用于捕获组件树中的错误。

React DevTools#

React 官方开发工具,用于调试 React 应用。


开发资源库收集
https://fuwari.vercel.app/posts/开发资源库收集/
作者
Kellen
发布于
2025-12-22
许可协议
CC BY-NC-SA 4.0