CodeNodeX AI
注册写作
首页/标签/React

#React

专题介绍

这里聚合 CodeNodeX AI 社区中与 React 相关的技术文章和讨论，覆盖概念解释、工具对比、工程实践、常见问题和独立开发经验。

如果你正在研究 React，建议先阅读高质量长文，再参与帖子讨论，形成从理解到实践的完整路径。

@admin·4 分钟阅读·Web 开发

Next.js App Router 深度:路由、布局与数据流

App Router 是 Next.js 的核心,但它的嵌套布局/并行路由/拦截路由/动态段很多人没用透。本文讲清 App Router 的文件约定(layout/page/template/loading/error)、并行路由与拦截路由的高级用法、Server/Client 组件数据流,以及从 Pages Router 迁移的关键差异。

#Next.js #React♥ 1480 评论
@admin·4 分钟阅读·Web 开发

React 组件的可访问性实战

语义 HTML 不够——自定义 React 组件(模态框/Dropdown/Tab/Toast)需要手动处理 a11y:焦点管理、键盘导航、ARIA、屏幕阅读器通知。本文讲清这些常用组件的 a11y 模式,让你写的自定义交互组件也能被所有人用。

#React #TypeScript♥ 1500 评论
@admin·4 分钟阅读·Web 开发

Web 性能监控(RUM):从采集到告警

Lighthouse 只在开发时跑,生产用户的真实体验谁管?RUM(Real User Monitoring)采集真实用户的 LCP/INP/CLS 和 JS 错误。本文讲清 RUM 的采集(web-vitals 库)、上报、看板、告警,以及把"实验室快"变成"用户也快"。

#Next.js #React♥ 1530 评论
@admin·8 分钟阅读·Web 开发

CSS Grid 精通：从二维布局到实战

Flexbox 是一维的，Grid 是二维的——真正的页面布局该用 Grid。本文讲清 Grid 的核心概念（行/列/区域/轨道）、fr 单位与 minmax、grid-template-areas 语义化布局、响应式 Grid（auto-fit/auto-fill）、Grid vs Flexbox 的取舍，带你从"能用 Grid"到"精通 Grid"。

#React #TypeScript♥ 1550 评论
@admin·8 分钟阅读·Web 开发

React 并发特性深入：Suspense、Transitions 与 useDeferredValue

React 18+ 的并发渲染不是"多线程"，是"可中断渲染"。本文讲清三个核心并发特性：Suspense（声明式加载状态）、useTransition（把重更新标为低优先级不阻塞输入）、useDeferredValue（延迟昂贵计算），以及它们怎么让 React 应用在不牺牲响应性的前提下做更多事。

#Next.js #React♥ 1560 评论
@admin·9 分钟阅读·Web 开发

OAuth 2.0 PKCE 与 Token 旋转

SPA 和移动端用隐式流不安全,PKCE 是现代标配。本文讲清 PKCE 原理(code_verifier/code_challenge)、为什么替代 implicit flow、Access Token vs Refresh Token 的生命周期、Token 旋转与撤销,给一套生产级 OAuth 客户端实现。

#React #DevOps♥ 1610 评论
@admin·5 分钟阅读·Web 开发

Web 图片优化：格式、响应式与懒加载

图片是页面最大的资源，优化图片 = 优化 LCP。本文讲清现代图片格式(WebP/AVIF vs JPEG/PNG)、响应式图片(srcset/sizes)、Next.js Image 组件、懒加载与占位、CDN 动态调整，给一套生产级图片优化方案。

#Next.js #React♥ 1640 评论
@admin·6 分钟阅读·Web 开发

E2E 测试实战：Playwright

单测验证单元、集成测验证组合,但"用户能不能真正用"只有 E2E 能答。本文讲清 Playwright(微软出品,跨浏览器/自动等待/网络拦截/并行)的核心能力、Page Object 模式、CI 集成、以及 E2E 该测什么不该测什么。

#React #TypeScript♥ 1650 评论
@admin·6 分钟阅读·Web 开发

React Portal：模态框、Tooltip 与层叠上下文

模态框渲染在组件树深处，会被父级的 z-index/overflow/transform 截断。Portal 把它渲染到 document.body，逃离父级限制。本文讲清 Portal 原理、模态框完整实现（Portal + 焦点陷阱 + Escape + 滚动锁定）、无障碍（aria-modal），以及 Radix Dialog 替你做好这一切。

#React #TypeScript♥ 1680 评论
@admin·5 分钟阅读·Web 开发

Web 字体优化:加载、渲染与 CLS

自定义字体让设计更好,但加载不当会拖慢 LCP + 导致 CLS(字体闪烁)。本文讲清字体优化全链路:font-display 策略(swap/fallback/optional)、preload 关键字体、子集化(woff2 + 仅需字符)、FOUT vs FOIT、variable fonts,给一套"字体好看又快"的方案。

#Next.js #React♥ 1740 评论
@admin·11 分钟阅读·Web 开发

CSS Container Queries：真正基于组件的响应式

Media Query 响应的是视口宽度，Container Query 响应的是父容器宽度——这让组件真正自适应（同一组件在侧边栏窄、主区宽各显示不同布局）。本文讲清 Container Queries 的原理、@container 语法、container-type 设置、浏览器支持现状，以及它怎么改变响应式设计的思路。

#React #TypeScript♥ 1750 评论