React Modernization

核心用法

react-modernization 是一款专注于 React 技术栈现代化的 Skill，涵盖三大核心场景：

1. 类组件到 Hooks 迁移：提供完整的生命周期方法映射表（componentDidMount → useEffect、shouldComponentUpdate → React.memo 等），包含状态管理、副作用清理、HOC 转自定义 Hook 的详细代码范式。

2. 版本升级路径：

• React 17→18：强制迁移至 createRoot API，自动批处理行为变更，Strict Mode 双调用检测
• React 18→19：use() Hook 直接读取 Promise/Context、ref 作为普通 prop、Context 简化语法、useActionState 异步表单处理

3. 工程化工具链：集成官方 codemod 脚本（replace-reactdom-render、replace-string-ref 等），提供 ripgrep 搜索模式用于批量定位待迁移代码。

显著优点

• 系统性覆盖：从微观代码模式到宏观架构迁移（Suspense 边界、并发特性）完整闭环
• TypeScript 友好：包含泛型组件、事件处理器类型、Props 接口设计的完整示例
• 安全零依赖：纯 Markdown 文档型 Skill，无网络调用、无敏感数据收集、无供应链风险
• 可渐进采用：迁移检查清单支持组件级灰度，从叶子节点向根节点推进

潜在局限

• 来源可信度 T3：由个人开发者维护（wpank），非 Meta 官方或知名开源基金会背书
• 无自动化验证：代码示例需人工适配实际业务逻辑（如 fetchUser 替换为真实 API 调用）
• 框架特定：仅覆盖 React 生态，Next.js、Remix 等全栈框架的 SSR 细节需额外参考
• React 19 前瞻性：部分 API（use()、useOptimistic）尚处实验阶段，生产环境需谨慎

适合人群

• 维护 legacy React 16/17 类组件代码库的中高级前端工程师
• 计划升级至 React 18/19 以启用并发特性的技术团队
• 需要系统化 TypeScript 迁移指南的 JavaScript 项目

常规风险

• Strict Mode 双调用：React 18+ 开发模式下 Effect 执行两次可能暴露竞态条件
• Suspense 水合错误：服务端渲染场景下 Promise 状态不匹配导致 hydration mismatch
• Hook 依赖遗漏：useEffect 依赖数组不完整引发闭包陷阱（文档明确警告禁用 eslint-disable 掩盖）
• 并发特性误用：startTransition 包裹同步状态更新将丧失 UI 响应性优化价值