tag

ReAct

共 55 篇文章。
全部文章GoGodotGolangTutorialRustSaaSRust TutorsPrdLua游戏客户端MinigameLong Term Novel Writing ExperienceSpore Trilogy Creative Writing Notes孢子三部曲
frontend

前端表单与验证架构:设计模式、状态管理与无障碍

前端表单与验证架构:表单状态管理(受控/非受控/半受控)、验证策略(即时/提交时/混合/防抖)、验证库选型(React Hook Form/Formik/Zod/Yup/Joi)、动态表单与数组字段、文件上传与进度、表单性能优化(减少重渲染/虚拟字段)、无障碍(ARIA label/错误提示/键盘导航/屏幕阅读器)、多步表单与状态机、表单安全(CSRF/XSS/防重复提交)。

6 分钟阅读
表单 验证 React
frontend

React Server Components 实战:流式渲染、缓存策略与混合架构

React Server Components 实战:RSC 与 SSR/CSR 区别、Server Component 执行环境(Node.js/Edge)、客户端组件边界('use client')、流式传输(Suspense + Streaming)、数据获取与缓存(React Cache/fetch 自动 dedupe)、Server Action 与表单突变、混合架构设计(App Router 文件约定)、性能优化(Payload 大小/部分水合/选择性渲染)、与 Next.js App Router 深度集成、常见陷阱与排错。

6 分钟阅读
React RSC Next.js
vite

React 应用架构模式:目录结构、状态管理与性能优化

系统讲解用 Vite 构建的 React 应用的架构模式:React 应用的三层架构(UI/状态/数据)、目录结构与模块边界(Feature-based 组织)、状态管理选型(本地/全局/服务端状态)、路由与代码分割(懒加载与性能)、数据获取与缓存(请求/缓存/竞态)、SSR/CSR 与混合渲染、组件设计模式(组合/受控/Hook 抽取)、性能优化清单(渲染/包体/加载)、以及与 Vite 工程化的结合(环境/构建/部署),帮助搭建可扩展、可维护、高性能的 React 应用。

17 分钟阅读
React Vite 架构模式
frontend

前端状态管理全景:从 useState 到服务端状态的选型决策

引言 状态管理是前端架构中最容易被低估、也最容易演变成技术债的领域。useState 解决的是组件局部状态,Context 解决的是跨层级传递,但当共享状态开始跨越模块、页面甚至服务端边界时,方案的取舍就变得复杂。本文系统梳理从 React 内置方案到 Redux/Zustand/信号、再到 TanStack Query 的完整图谱,并给出可落地的选型决策树。

12 分钟阅读
状态管理 React Redux
llm

AI Agent 产品设计方法论:从交互范式到产品落地的完整框架

系统拆解 AI Agent 产品设计的完整方法论体系:从工具思维到 Agent 思维的范式迁移、五大核心组件 UX 设计、四种交互模式(Chat/Copilot/Autonomous/Hybrid)、分层记忆系统设计、可靠性工程与容错策略、多智能体编排的 UX 挑战、信任与可解释性设计。 涵盖 ReAct、Plan-and-Solve、Reflexion、DEPS 四大设计模式的适用场景,以及 Devin、AutoGPT、Claude Computer Use 三个经典案例的产品分析。 附 Agent 产品评估矩阵、自主度光谱模型与伦理安全护栏设计框架。

24 分钟阅读
AI Agent 产品设计 交互设计
frontend

前端安全进阶:XSS、CSP、SRI 与供应链安全

系统性前端安全深度指南:XSS 全分类(Reflected/Stored/DOM-based/mXSS)与防御矩阵(转义/CSP/DOMPurify/Trusted Types)、CSP(Content Security Policy)策略设计与部署、SRI(Subresource Integrity)校验、CSRF Token 与 SameSite Cookie、前端加密与密钥管理、npm 供应链安全(package-lock/audit/SBOM/openSSF Scorecard)、原型污染防御、eval/new Function 沙箱替代方案、浏览器安全头全览。附 Vue/React/Next.js 安全配置。

5 分钟阅读
security xss csp
frontend

Web 可访问性(a11y):合规标准、技术实现与用户体验

系统性 Web 可访问性指南:WCAG 2.1/2.2 标准解读(感知性/可操作性/可理解性/健壮性四大原则)、语义化 HTML 与 ARIA 正确使用、键盘导航与焦点管理、屏幕阅读器兼容(NVDA/JAWS/VoiceOver)、色彩对比度与色觉障碍、减少动态内容(prefers-reduced-motion)、表单可访问性、可访问性测试工具(axe-Core/Lighthouse/pa11y)、法律合规(ADA/EN 301 549/中国无障碍环境建设法)。附 Vue/React 实战代码。

9 分钟阅读
a11y accessibility wcag
frontend

PWA 与 Service Worker:离线化、缓存策略与服务扩展

系统性 PWA 实战指南:Service Worker 注册与生命周期(install/activate/fetch)、缓存策略(Cache-First/Network-First/Stale-While-Revalidate/Cache-Only/Network-Only)、Workbox 自动化缓存、Background Sync、Push 通知、Web App Manifest、Add to Home Screen(A2HS)、Service Worker 更新机制与版本控制、PWA 与 SPA/SSR 结合。附 Vue/React/Next.js 完整配置。

7 分钟阅读
pwa service-worker workbox
frontend

Web 性能指标全解析:Core Web Vitals 与真实用户监控(RUM)

系统性解读 Web 性能指标体系:Core Web Vitals(LCP、INP、CLS)的测量原理、优化阈值与实战方案;TTFB/FCP/FID/TBT 等辅助指标;真实用户监控(RUM)与实验室测试(Lighthouse)的结合;Web Vitals JS API、Chrome UX Report(CrUX)、PerformanceObserver、Resource Timing;Vue/React 性能监控 SDK 接入。

5 分钟阅读
performance web-vitals core-web-vitals
frontend

TypeScript 工程化实战:从类型体操到架构安全

系统性 TypeScript 工程化指南:tsconfig 严格模式配置、高级类型体操(条件类型、映射类型、模板字面量、infer)、类型守卫与 Narrowing、泛型约束与协变逆变、类型安全边界(noUncheckedIndexedAccess、exactOptionalPropertyTypes)、monorepo 类型共享、API 类型自动同步(OpenAPI → TS)、品牌类型(Branded Types)与名义类型系统。附 Vue/React/Node.js 实战配置。

7 分钟阅读
typescript type-safety engineering
frontend

专题三:前端工程化与性能优化

前端工程化是保障大型项目可维护性与团队协作效率的系统性方法论。本专题从工程化体系出发,系统覆盖代码规范与 ESLint/Prettier 配置、Monorepo 架构与 pnpm workspace、Vite/Webpack/esbuild 构建工具深度解析、CI/CD 自动化流水线、Web 性能全栈优化(Core Web Vitals、RUM 真实用户监控、资源加载策略、图片/字体/代码分割优化)、浏览器缓存与 CDN 配置、Web 安全(CSP/CORS/XSS 防护)、前端测试(单元测试/E2E/视觉回归)、可访问性 a11y 与 PWA 渐进式 Web 应用,以及 Vue/React/Next.js/Astro 等框架的工程化最佳实践,打造企业级前端交付能力。

4 分钟阅读
frontend-engineering performance optimization