#React

专题介绍

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

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

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

Web 性能预算:把快变成纪律

性能不是"偶尔优化",是持续保持。性能预算(Performance Budget)给"快"定一个不可逾越的线。本文讲清预算怎么定(JS/图片/CSS 各分多少)、CI 自动检查、超预算怎么办(砍功能/优化/谈判),让团队不再"慢了再优化"。

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

微前端架构:大型应用的拆分

前端项目大到单仓库扛不住时,微前端像微服务一样拆。本文讲清微前端的动机与代价、几种实现(Module Federation/iframe/Web Components/路由分发)、各自优劣,以及最关键的——大多数团队不该上微前端(单仓库够用)。

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

CSS 动画性能:GPU 加速与合成层

动画卡,90% 是触发了重排重绘。本文讲清 CSS 动画性能:只动画 transform/opacity(合成层,不触发 layout)、will-change 的用法与误用、避免 layout thrashing、动画的 prefers-reduced-motion,让你的动画丝滑 60fps。

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

前端错误 Support Bundle:用户授权、隐私预算与脱敏证明

浏览器报错需要上下文,但整页录屏、请求体和控制台很容易带走令牌与个人数据。本文定义客户端先脱敏、按预算采集的 Support Bundle,让支持人员可复现界面故障又不默认复制用户会话。

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

Web 可访问性:WCAG 指南与实践

可访问性不是"给少数人的福利",它是法律合规(ADA)、SEO 加分、产品质量。本文讲清 WCAG 的四原则(可感知/可操作/可理解/健壮)、最常见的前端 a11y 问题(对比度/焦点/alt/表单标签/ARIA 误用)、自动检查工具,以及把 a11y 当成 CI 的一部分。

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

Next.js Server Actions 深度

Server Actions 让你在组件里直接写服务端函数,前端调它像调 async function——不用写 API 路由。本文讲清 Server Actions 的工作原理、'use server' 的含义、表单提交模式(渐进增强)、revalidate 重验证、安全边界(它是公开端点!),以及和传统 API 路由的取舍。

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

Web Push 通知:从订阅到推送

想给 Web 用户发推送通知,不用 app 也能做到——靠 Web Push API + Service Worker + Push 服务。本文讲清 Web Push 的完整链路(订阅→服务端推送→SW 展示)、VAPID 密钥、Notification 权限与体验,以及 iOS Safari 16.4+ 也支持了。

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

React 错误边界与异常处理

一个组件 throw 就白屏?错误边界(Error Boundary)把崩溃控制在局部。本文讲清 Error Boundary 的用法(class 组件 + getDerivedStateFromError)、哪些错误它捕获不到(事件/异步/SSR)、react-error-boundary 库,以及一套完整的前端异常处理策略(边界兜底 + 全局上报)。

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

WebAuthn 与 Passkey:无密码认证

密码是最大的安全漏洞——弱密码、重用、钓鱼、泄露。Passkey(WebAuthn)用设备生物识别替代密码,安全又无感。本文讲清 WebAuthn 的原理(公私钥 + 设备认证)、Passkey 注册与验证流程、浏览器/平台支持现状,以及给你的产品加 Passkey 的落地路径。

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

React Suspense 与数据获取

Suspense 让"组件等数据"变得声明式——不用手动管理 loading 状态,Suspense 边界自动展示 fallback。本文讲清 Suspense 的工作原理、和 React Query/TanStack Query 的配合、流式 SSR(Server Components + Suspense),以及 Suspense 的边界在哪(不是所有异步都该包 Suspense)。

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

React Context 性能陷阱与优化

Context 用着简单,但值一变所有消费者全重渲染——高频场景这是性能杀手。本文讲清 Context 的重渲染机制、为什么"把所有状态塞一个 Context"是反模式、怎么拆(多 Context/选择性订阅/useContextSelector)、以及什么时候该换 Zustand。

#Next.js #React♥ 1160 评论