前端技术栈资源
近期使用的前端开发工具与资源库，涵盖 React 技术栈、可视化、网络通信及工程化等方向，按用途分类整理如下：
React 技术栈
基于 React 生态的核心框架与周边工具，涵盖状态管理、UI 组件、表单处理等前端开发全链路。
框架核心
React 应用开发的基础框架，提供组件化开发能力和路由管理。
- React 19 ：最新版 React，支持 Server Components 和改进的并发渲染。新版本优化了编译器性能，减少了不必要的重渲染。
- React Router 7 ：文件系统路由框架，支持 CSR/SSR 模式切换，内置数据加载和错误处理机制。
状态管理
集中管理应用状态的解决方案，简化组件间数据共享。
- Zustand ：一款轻量级的 React 状态管理库，其 API 简洁易懂，上手难度低。它不依赖复杂的上下文或高阶组件，代码结构清晰，适合快速搭建中小型项目，能有效减少样板代码，提升开发效率。
- Redux Toolkit ：Redux 官方推荐的开发工具集，简化了 Redux 的配置和使用。它内置了 immer、redux-thunk 等常用中间件，大幅减少样板代码。
UI 组件库
预构建的可复用 UI 组件，加速界面开发。
- Shadcn UI ：基于 Tailwind CSS 的 UI 组件库，提供了一系列预构建的组件。这些组件可直接使用，并且易于定制，能帮助开发者快速搭建出美观且一致的用户界面。
- Radix UI ：以可访问性为首要考虑的无样式 UI 组件库。它提供了基础的交互逻辑和无障碍支持，开发者可根据需求自定义样式，适合追求个性化设计的项目。
- Ant Design ：知名的企业级 UI 设计语言和组件库，拥有丰富的组件和完善的文档。其设计风格简洁大气，适用于构建中后台管理系统等大型项目。
- Lucide React ：现代化的图标库，提供 1000+ 精美图标。基于 Feather Icons 构建，支持 Tree Shaking。
样式与动画
CSS 框架和动画库，实现精美的视觉效果。
- Tailwind CSS 4 ：原子化 CSS 框架最新版，v4 版本重构了核心引擎，性能大幅提升。支持原生 CSS 嵌套、容器查询等现代特性，配置更加简洁。
- Tailwind CSS Animated ：Tailwind CSS 的动画扩展库，提供了多种预设动画效果。开发者只需添加相应类名，就能轻松为页面元素添加动态效果。
- Framer Motion ：强大的 React 动画库，支持声明式动画和交互。它提供了丰富的动画 API 和过渡效果，能帮助开发者创建出流畅、自然的用户交互体验。
- Motion ：新一代动画库，Framer Motion 的继任者。提供更小的体积和更好的性能，支持 CSS 变量和视图过渡。
表单与数据验证
表单状态管理和运行时数据校验工具。
- React Hook Form ：专注于高性能的 React 表单处理库。通过利用 React Hooks，它能最小化渲染次数，优化表单性能。同时提供了丰富的验证和错误处理机制，可显著提升用户填写表单的体验。
- Zod ：专门为 TypeScript 设计的模式验证库。它能在运行时对数据进行严格验证，确保数据结构符合预期。借助 Zod 的类型推导功能，可在编译阶段发现潜在错误，提高代码的健壮性。
国际化
多语言应用开发支持。
- i18next ：功能强大且灵活的国际化框架，支持多种语言的应用开发。它提供了丰富的插件和工具，可轻松实现语言切换、翻译管理等功能，适用于各种规模的项目。
- react-i18next ：i18next 在 React 中的绑定库，以组件化的方式实现国际化。开发者可使用组件和钩子轻松处理多语言文本，方便集成到 React 项目中。
工具函数库
通用工具函数集合，简化常见编程任务。
通用工具
- Lodash.js ：一个广泛使用的 JavaScript 工具库，提供了大量实用函数，如数组操作、对象处理、函数节流防抖等。它能简化复杂的 JavaScript 操作，提高代码的可读性和可维护性。
- Lodash-es ：ES Module 版本的 Lodash，支持 Tree Shaking，可显著减少打包体积。
- Ahooks ：一个 React Hooks 库，封装了许多常见的业务逻辑和实用 Hooks。使用这些 Hooks 可减少重复代码，提升开发效率，尤其适用于 React 项目。
- p-queue ：用于控制异步操作并发的库。它允许开发者限制同时执行的异步任务数量，避免资源过度占用，保证程序的稳定性。
日期时间处理
- Day.js ：轻量级的日期时间处理库，语法与 Moment.js 相似，但体积更小、性能更高。它支持链式调用和多语言，可替代 Moment.js 用于处理日期和时间。
- date-fns ：现代日期工具库，提供 200+ 函数式 API。支持 Tree Shaking，只打包使用到的函数。
可视化与图形
数据可视化、3D 渲染和地图相关的库。
图表可视化
- Recharts ：基于 React 和 D3 的图表库，支持响应式设计。提供折线图、柱状图、饼图等常用图表类型，适合数据分析展示。
- Vis.js Network ：网络拓扑图可视化库，支持节点拖拽、缩放、布局算法。适合展示设备关系、组织架构等网络结构。
- GoJS ：交互式图表库，支持流程图、状态图、树形图等。提供丰富的布局算法和用户交互功能。
3D 与图形渲染
- Three.js ：WebGL 3D 渲染库，用于创建 3D 场景和动画。支持多种 3D 格式导入，适合产品展示、数据可视化等场景。
- React Three Fiber ：Three.js 的 React 渲染器，以声明式方式构建 3D 场景。配合 Drei 工具库可快速实现复杂 3D 效果。
- Pixi.js ：高性能 2D WebGL 渲染引擎，适合游戏开发和复杂图形应用。支持精灵动画、滤镜效果等高级功能。
地图与 GIS
- Leaflet ：轻量级交互式地图库，支持多种地图服务商。插件生态丰富，适合 Web 端地图展示应用。
- proj4leaflet ：坐标投影转换插件，支持国内坐标系（GCJ-02、BD-09）与 WGS-84 的互转。
- Turf.js ：地理空间分析库，提供缓冲区计算、距离测量、区域判断等 GIS 功能。
网络通信
实时通信、文件处理和数据传输相关工具。
实时通信
- WebRTC ：实时通信技术的标准，支持浏览器和移动应用之间的音视频通话和数据传输。它无需插件，可直接在浏览器中使用，广泛应用于视频会议、在线教育等领域。
- MQTT.js ：MQTT 协议客户端，支持 WebSocket 和 TCP 连接。适用于物联网和实时通信场景。
- MITT ：极简的事件发布/订阅库，代码体积小，使用简单。它适合在小型项目中管理事件，实现组件间的解耦和通信。
文件与数据处理
- XLSX ：用于读写 Excel 文件的 JavaScript 库。它支持多种文件格式，可在浏览器和 Node.js 环境中使用，方便开发者处理 Excel 数据。
- TUS ：一种可恢复的文件上传协议，适用于大文件分块上传。它支持断点续传，能在网络中断或上传失败时继续上传，提高文件上传的可靠性。
工程化工具
构建工具和代码质量保障工具。
构建工具
- Vite ：新一代前端构建工具，基于 ES Modules 实现快速冷启动和热更新。它能显著提升开发效率，尤其适合大型项目的开发和调试。
- FNM ：快速的 Node.js 版本管理工具，支持快速切换 Node.js 版本。它安装和使用方便，能帮助开发者在不同项目中使用合适的 Node.js 版本。
代码质量
- Biome ：高性能的 JavaScript 和 TypeScript 工具链，集成了代码格式化、语法检查、代码分析等功能。它能统一团队的代码风格，提高代码质量。
- oxlint ：Oxidation Compiler 的代码检查工具，使用 Rust 编写，比 ESLint 快 50-100 倍。支持大部分 ESLint 规则，适合大型项目。
桌面应用开发
跨平台桌面应用开发框架。
Last updated on