fec-legacy-to-modern-migrationlisted

# 传统前端到现代框架迁移 适用于将 JavaScript + jQuery + HTML/CSS 多页面应用（MPA）或服务端模板渲染项目，迁移至 React + TypeScript 或 Vue 3 + TypeScript 单页面应用（SPA）的场景。 ## Purpose 指导将 jQuery/MPA 传统前端项目渐进迁移至 React + TypeScript 或 Vue 3 + TypeScript，提供迁移策略、概念映射、分阶段步骤和实施约束，确保功能等价和风险可控。 ## 迁移策略选择 | 策略 | 适用情况 | 优点 | 风险 | | --------------------------- | ------------------------------------ | ---------------------------- | ---------------------------- | | **渐进式（Strangler Fig）** | 大型项目、需持续交付、团队熟悉度不足 | 风险可控、可分批上线、可回滚 | 新旧并存期长、需维护两套代码 | | **一次性重写** | 中小型项目、业务稳定、有充足时间窗口 | 目标架构清晰、无历史包袱 | 周期长、上线压力大、回滚困难 | **推荐**：优先考虑渐进式，除非项目规模小且业务简单。 ## 概念映射 ### jQuery → React | 遗留模式 | React 对应 | | ------------------------------------------ | -------------------------------------- | | `$(selector).html(content)` | 声明式 JSX + state 驱动渲染 | | `$(document).on('click', '.btn', handler)` | `onClick` + 事件委托由 React 处理 | | `$.ajax()` / `$.get()` | `fetch` / `axios` + React Query 或 SWR | | 全局变量 / 命名空间存储状态 | `useState` / `useContext` / Zustand | | `$(el).show()` / `$(el).hide()` | 条件渲染 `{visible && <Component />}` | | 手动 DOM 操作 `append` / `remove` | 数据驱动，通过 setState 触发重渲染 | | 模板字符串拼接 HTML | JSX 组件 + props | | 多页面 + 服务端路由