浏览React相关的文章。
了解如何在真实浏览器环境中进行端到端(E2E)测试,并学习在 React 项目中安装 Playwright、编写测试以及使用 UI 模式和 Codegen。
我们通过总结从第 1 部分到第 14 部分的旅程来结束本系列,并提出引入 TDD 前后代码质量的变化以及未来的方向(E2E、可视化测试)。
介绍实际项目采用 TDD 的成本与收益、团队应用策略,以及如何通过 CI/CD 让测试持续运行。
比较单元测试、集成测试和端到端测试的特点,并介绍适用于 React 前端的测试奖杯策略。
学习如何避开实现细节,围绕用户行为编写在内部实现改变后仍能通过的测试。
分析难以测试的组件特征,学习通过分离 UI 与逻辑、处理全局 Provider,将结构改进为更易测试的形式。
了解如何使用 userEvent.type 模拟用户的文本输入,并验证缺少所需输入值时出现的错误消息(验证)。
学习引入 MSW 拦截网络请求,在无需真实服务器的情况下测试 API,并验证服务器错误等场景。
学习如何测试 API 请求等异步操作,并使用 findBy 查询观察和验证加载、成功与错误状态的变化。
将业务逻辑抽离为自定义 Hook,并学习使用 renderHook 与 act 独立测试 Hook。
测试 useState 状态变化引发的条件渲染,理解 getBy 与 queryBy 的区别,并通过日志追踪状态变化。
以测试为保障拆分组件、改进代码结构,并通过 screen.debug() 查看测试过程中的渲染结果。
用最少的代码实现组件,让失败的测试从 Red 变为 Green,并通过 useState 完成交互。
学习如何从用户角度编写 React 测试,使用无障碍查询编写第一个失败测试(Red)。
学习如何使用 Vite 从头创建并运行 React 项目,再安装 Vitest 和 React Testing Library,完整搭建 TDD 环境。
了解前端测试为何重要,以及在 React 项目中采用 TDD 的优势与测试范围。
深入介绍 Next.js 16 所搭载的 React 19 核心功能:View Transitions、Server Actions 安全增强,以及 useOptimistic 等新 Hook 的用法。
从序列化和 RCE 等计算机科学原理分析 React/Next.js 的 React2Shell 漏洞,并了解不依赖特定云厂商的通用修复方法。
通过构建 To-Do 应用,实践 Zustand store 设计、局部和全局状态管理及组件结构。
使用 TypeScript 深入理解 Zustand 的 create 函数,并了解如何用 selector、shallow 优化性能,以及使用 get、set、subscribe 等高级 Store 方法。
介绍 React 状态管理库 Zustand,并与 Redux 和 Context API 对比。通过计数器示例学习 Zustand 的基本用法。
以JSONPlaceholder为例,将React Query查询逻辑封装为可复用Hook,并支持参数、查询选项与类型安全。
结合示例介绍如何在 React 中使用 TanStack Query 处理异步 API 数据,涵盖安装、查询与进阶缓存策略。
了解如何在 React、Expo 和 React Native 项目中使用 i18next 配置多语言翻译、管理翻译资源,并实现格式化和单复数处理。
用 TypeScript 定义 Axios 请求与响应类型,配置拦截器,并组织 API 服务文件。
通过示例学习 React 泛型组件、自定义 Hook 类型推断,以及使用 Zod/Yup 和 React Hook Form 提升表单类型安全性。
了解 React DevTools 的 Components、Profiler 标签页,Jest 与 React Testing Library 的测试模式,以及使用 Storybook 和 Chromatic 开发 UI 与进行视觉测试的工作流。
通过示例了解如何防范 React 应用中的 XSS、CSRF 等安全威胁,并介绍 OAuth 2.0/OIDC 认证流程、代码分割以及稳定管理第三方脚本的策略。
学习 React 应用的 API 通信与异步处理策略,比较 Fetch 和 Axios、用 AbortController 取消请求、了解 GraphQL 客户端的使用时机及 Suspense 数据加载。
介绍微前端架构的概念、优缺点与实现策略,涵盖 Webpack Module Federation、Single-SPA、团队边界和部署模式。
学习设计可复用、易维护 React 组件的原则与模式,包括 SRP、Atomic Design、Container/Presentational,并了解如何提高可测试性。
了解数组、链表、树、图和哈希表如何用于 React 列表渲染、Hook 与 Update Queue 状态管理、代码拆分、缓存和性能优化。
介绍 React Router v6 的工作原理与用法,涵盖 History API、URL 匹配、嵌套路由、Outlet、Link、useNavigate 和代码拆分。
比较 React 的 CSR、SSR 和 SSG,说明 Hydration 的作用与风险,并介绍 Next.js 流式 SSR、部分 Hydration 和岛屿架构。
了解 React 全局状态管理原理、Context API 优化、Redux Toolkit、Zustand、Recoil 的比较,以及 React Query 和 SWR 等服务器状态管理方案。
从浏览器渲染流水线、React 首次渲染、JavaScript 事件循环到 CSR、SSR、SSG,理解 React 应用的基础运行原理。
介绍 useEffect 与 useLayoutEffect 的差异、useRef 的多种用途、useReducer 状态管理,以及自定义 Hook 的逻辑复用示例。
了解 React 18 自动批处理和并发的原理,包括与 React 17 的区别、微任务、flushSync 及 startTransition API。
深入了解 React useState 和 setState 的工作原理,包括 Hook 调用顺序、链表、Update Queue、函数式更新、批处理和延迟初始状态。
从数据结构角度理解 React 渲染流程:Virtual DOM、协调算法、Fiber 节点、优先级调度与 Strict Mode。
介绍Etherscan API密钥获取流程、账户余额查询,以及React与TypeScript中的多链请求实现。
面向 React 开发者介绍服务器端渲染(SSR):了解它的价值与基本流程,并逐步认识 React 18 的流式渲染、renderToPipeableStream 和 Suspense。
循序渐进地学习如何在 React 与 React Native 中使用 Context API 管理全局状态,并结合 useState 和 useReducer 构建计数器。
介绍JSDoc的基本语法、参数与返回值说明,以及示例、弃用、异常、异步和类型定义标签。
通过Tailwind配置文件、插件、global.css和自定义字体扩展主题与样式。
介绍博客使用的Next.js、TypeScript、Tailwind CSS、Shadcn及主要库的作用与选择原因。
比较通过Prisma自建API端点和Supabase REST API获取数据的方法,并介绍CSR、SSR配置与实际测试结果。