[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"$fW-NfQVWZ6z0kfYdsL5-p0QwsmJrsvAMccKhS7A44YcU":3,"$fXlUzpiWj7gVHeANSlvTyMR9AkvM_Ztg4rtwZ55SfsC0":14,"$fsHmjryIRSWojJxoRKt_6WTep52KXZLQO45JL8AQSqBM":184,"$fNqeRfkXroF54eqOFaLUJmEw7Y-B-yCnZlGDzxRYXZGA":185},{"siteTitle":4,"siteDescription":5,"icpNumber":6,"policeNumber":7,"githubUrl":8,"email":9,"baiduSiteVerification":7,"rewardWechatUrl":7,"rewardAlipayUrl":7,"authorName":10,"authorAvatar":11,"newsletterEnabled":12,"aiEnabled":13},"咕叽咕叽","咕叽咕叽的blog","蜀ICP备19034302号","","https:\u002F\u002Fgithub.com\u002FMonologuter","2439644676cy@gmail.com","叽叽咕咕","https:\u002F\u002Fmacbookpro99.oss-cn-shanghai.aliyuncs.com\u002Fuploads\u002F2026\u002F07\u002F97ed120b87e63a50a84713d9101f4247e31293bc6129f3a57aa49e1ebbbc4ff0-480.webp",false,true,{"id":15,"slug":16,"title":17,"excerpt":18,"contentHtml":19,"toc":20,"publishedAt":130,"updatedAt":131,"wordCount":132,"readingTimeMinutes":133,"viewCount":134,"allowComments":13,"seoTitle":135,"seoDescription":136,"seoKeywords":137,"categoryId":138,"seriesId":139,"seriesOrder":140,"sourceType":141,"sourceUrl":142,"sourceAuthor":142,"coverAssetId":143,"coverUrl":144,"category":145,"tags":148,"series":167,"prev":171,"next":142,"related":174},"0721cef8-5055-4f4c-839f-6ca6eff18e94","java-5-6-m9c0","Java 后端（5 年）→ 全栈：6 个月面试冲刺路线图","本文为5年Java后端开发者转型全栈的6个月冲刺指南，聚焦React+TS技术栈，强调“后端为压舱石、前端求够用”，给出精准技能分级（必学\u002F够用\u002F别学）、框架选型策略、AI协同开发实操要点及高性价比项目落地方案。","\u003Cblockquote>\u003Cp>目标：React + TypeScript 全栈 · 3–6 个月 · 兼顾大厂 \u002F 中小厂 \u002F 外企远程 · 2026 年 8 月版\u003C\u002Fp>\u003C\u002Fblockquote>\u003Cp>\u003Cstrong>标签说明\u003C\u002Fstrong>\u003C\u002Fp>\u003Ctable style=\"min-width: 50px\">\u003Ccolgroup>\u003Ccol style=\"min-width: 25px\"\u002F>\u003Ccol style=\"min-width: 25px\"\u002F>\u003C\u002Fcolgroup>\u003Ctbody>\u003Ctr>\u003Cth colspan=\"1\" rowspan=\"1\">\u003Cp>标签\u003C\u002Fp>\u003C\u002Fth>\u003Cth colspan=\"1\" rowspan=\"1\">\u003Cp>含义\u003C\u002Fp>\u003C\u002Fth>\u003C\u002Ftr>\u003Ctr>\u003Ctd colspan=\"1\" rowspan=\"1\">\u003Cp>\u003Cstrong>\u003Cspan style=\"color: #B54A2E\">【必学】\u003C\u002Fspan>\u003C\u002Fstrong>\u003C\u002Fp>\u003C\u002Ftd>\u003Ctd colspan=\"1\" rowspan=\"1\">\u003Cp>面试直接考，绕不开\u003C\u002Fp>\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd colspan=\"1\" rowspan=\"1\">\u003Cp>\u003Cstrong>\u003Cspan style=\"color: #7A5C1E\">【够用】\u003C\u002Fspan>\u003C\u002Fstrong>\u003C\u002Fp>\u003C\u002Ftd>\u003Ctd colspan=\"1\" rowspan=\"1\">\u003Cp>能讲原理即可，做过一次就行\u003C\u002Fp>\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd colspan=\"1\" rowspan=\"1\">\u003Cp>\u003Cstrong>\u003Cspan style=\"color: #6B6864\">【别学】\u003C\u002Fspan>\u003C\u002Fstrong>\u003C\u002Fp>\u003C\u002Ftd>\u003Ctd colspan=\"1\" rowspan=\"1\">\u003Cp>投入产出比极低\u003C\u002Fp>\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd colspan=\"1\" rowspan=\"1\">\u003Cp>\u003Cstrong>\u003Cspan style=\"color: #2E5F52\">【压舱石】\u003C\u002Fspan>\u003C\u002Fstrong>\u003C\u002Fp>\u003C\u002Ftd>\u003Ctd colspan=\"1\" rowspan=\"1\">\u003Cp>你的定价来源，不能丢\u003C\u002Fp>\u003C\u002Ftd>\u003C\u002Ftr>\u003C\u002Ftbody>\u003C\u002Ftable>\u003Chr\u002F>\u003Ch2 id=\"01--先说三个结论\">01 · 先说三个结论\u003Ca class=\"heading-anchor\" href=\"#01--先说三个结论\" aria-hidden=\"true\">#\u003C\u002Fa>\u003C\u002Fh2>\u003Cblockquote>\u003Cp>这三条决定你剩下 6 个月怎么分配时间，比任何技术清单都重要。\u003C\u002Fp>\u003C\u002Fblockquote>\u003Ch3 id=\"-你不是转行是加技能别把时间投错地方\">① 你不是转行，是加技能——别把时间投错地方\u003Ca class=\"heading-anchor\" href=\"#-你不是转行是加技能别把时间投错地方\" aria-hidden=\"true\">#\u003C\u002Fa>\u003C\u002Fh3>\u003Cp>5 年经验的定价锚仍然是\u003Cstrong>后端深度\u003C\u002Fstrong>。全栈岗的面试里前端通常只占 20–30% 的提问权重，但后端答砸了直接出局。所以时间分配应该是 \u003Cstrong>前端 40% \u002F 后端复习 35% \u002F 项目与简历 25%\u003C\u002Fstrong>，而不是一头扎进前端。\u003C\u002Fp>\u003Ch3 id=\"-前端只需要到能独立交付并解释每个决策的程度\">② 前端只需要到\"能独立交付并解释每个决策\"的程度\u003Ca class=\"heading-anchor\" href=\"#-前端只需要到能独立交付并解释每个决策的程度\" aria-hidden=\"true\">#\u003C\u002Fa>\u003C\u002Fh3>\u003Cp>不需要手写 Fiber 调度器、不需要读 diff 源码。标准是：给你一个中后台需求，你能从库表设计做到上线，并且面试官追问\"为什么这么选\"时你答得出取舍。\u003C\u002Fp>\u003Ch3 id=\"-面大厂投后端面中小厂外企投全栈同一份准备两版简历\">③ 面大厂投后端，面中小厂\u002F外企投全栈——同一份准备，两版简历\u003Ca class=\"heading-anchor\" href=\"#-面大厂投后端面中小厂外企投全栈同一份准备两版简历\" aria-hidden=\"true\">#\u003C\u002Fa>\u003C\u002Fh3>\u003Cp>国内大厂前后端分工很细，全栈岗少；你的 5 年经验投大厂应该投\u003Cstrong>后端岗\u003C\u002Fstrong>，全栈能力作为加分项。而中小厂 \u002F ToB \u002F 外企远程恰恰把\"一个人能端到端交付\"当核心卖点。准备一次，简历侧重两套。\u003C\u002Fp>\u003Chr\u002F>\u003Ch2 id=\"02--框架选型react-主修vue-留一周\">02 · 框架选型：React 主修，Vue 留一周\u003Ca class=\"heading-anchor\" href=\"#02--框架选型react-主修vue-留一周\" aria-hidden=\"true\">#\u003C\u002Fa>\u003C\u002Fh2>\u003Cp>你的目标里同时有大厂和外企远程，所以 \u003Cstrong>React + TypeScript 是主线\u003C\u002Fstrong>——国内一线大厂 React 占比约 60–70%，海外市场差距更大（React 全球使用率约为 Vue 的两倍以上）。\u003C\u002Fp>\u003Cp>但\u003Cstrong>不要只学 React\u003C\u002Fstrong>。国内中小厂、ToB、政企外包大量用 Vue 3 + Element Plus，完全不碰 Vue 等于砍掉一半岗位池。做法是：React 学到能造轮子，Vue 3 花 1 周学到\u003Cstrong>能读懂、能改、能在面试里说清它和 React 的心智差异\u003C\u002Fstrong>（响应式 vs 重渲染、模板 vs JSX、Composition API 与 Hooks 的对应关系）。\u003C\u002Fp>\u003Cblockquote>\u003Cp>\u003Cstrong>例外\u003C\u002Fstrong>：如果你现在公司已经在用 Vue，就主修 Vue、React 速览——手上有真实项目比框架本身更值钱。只有目标明确包含海外远程时，才值得为 React 从零开始。\u003C\u002Fp>\u003C\u002Fblockquote>\u003Chr\u002F>\u003Ch2 id=\"03--技能清单学什么学到什么程度\">03 · 技能清单：学什么、学到什么程度\u003Ca class=\"heading-anchor\" href=\"#03--技能清单学什么学到什么程度\" aria-hidden=\"true\">#\u003C\u002Fa>\u003C\u002Fh2>\u003Ch3 id=\"必学typescript\">\u003Cspan style=\"color: #B54A2E\">【必学】\u003C\u002Fspan>TypeScript\u003Ca class=\"heading-anchor\" href=\"#必学typescript\" aria-hidden=\"true\">#\u003C\u002Fa>\u003C\u002Fh3>\u003Cblockquote>\u003Cp>你有 Java 泛型底子，这块比科班前端还快\u003C\u002Fp>\u003C\u002Fblockquote>\u003Cul>\u003Cli>\u003Cp>泛型与泛型约束、条件类型、映射类型\u003C\u002Fp>\u003C\u002Fli>\u003Cli>\u003Cp>内置工具类型：\u003Ccode>Partial\u003C\u002Fcode> \u003Ccode>Pick\u003C\u002Fcode> \u003Ccode>Omit\u003C\u002Fcode> \u003Ccode>Record\u003C\u002Fcode> \u003Ccode>ReturnType\u003C\u002Fcode>\u003C\u002Fp>\u003C\u002Fli>\u003Cli>\u003Cp>类型收窄、类型守卫、\u003Ccode>unknown\u003C\u002Fcode> vs \u003Ccode>any\u003C\u002Fcode>、\u003Ccode>never\u003C\u002Fcode>、\u003Ccode>as const\u003C\u002Fcode>\u003C\u002Fp>\u003C\u002Fli>\u003Cli>\u003Cp>高频面试题：\u003Ccode>interface\u003C\u002Fcode> 还是 \u003Ccode>type\u003C\u002Fcode>、结构化类型系统和 Java 名义类型的区别\u003C\u002Fp>\u003C\u002Fli>\u003Cli>\u003Cp>\u003Cstrong>TypeScript 7（tsgo）\u003C\u002Fstrong>：Go 重写、约 10x 提速，知道 \u003Ccode>tsc\u003C\u002Fcode> 与 \u003Ccode>tsgo\u003C\u002Fcode> 的取舍和迁移阻塞点即可（工程化话题常问）\u003C\u002Fp>\u003C\u002Fli>\u003C\u002Ful>\u003Ch3 id=\"必学react-核心权重最高的一块\">\u003Cspan style=\"color: #B54A2E\">【必学】\u003C\u002Fspan>React 核心（权重最高的一块）\u003Ca class=\"heading-anchor\" href=\"#必学react-核心权重最高的一块\" aria-hidden=\"true\">#\u003C\u002Fa>\u003C\u002Fh3>\u003Cul>\u003Cli>\u003Cp>\u003Cstrong>Hooks 心智模型\u003C\u002Fstrong>：每次渲染是一次快照——这是理解一切的地基\u003C\u002Fp>\u003C\u002Fli>\u003Cli>\u003Cp>\u003Ccode>useEffect\u003C\u002Fcode> 依赖数组、清理函数、\u003Cstrong>闭包陷阱\u003C\u002Fstrong>（几乎必问）；\u003Ccode>useEffectEvent\u003C\u002Fcode>（19.2 转正）——把非响应式逻辑从 Effect 里摘出来\u003C\u002Fp>\u003C\u002Fli>\u003Cli>\u003Cp>\u003Cstrong>React Compiler 1.0\u003C\u002Fstrong>（2025-10 稳定）：自动 memo 化原理、什么代码会让它放弃优化（违反 Hooks 规则、读写 ref、可变对象） \u003Cem>标准追问：上了 Compiler 之后你还手写 \u003C\u002Fem>\u003Ccode>useMemo\u003C\u002Fcode>\u003Cem>\u002F\u003C\u002Fem>\u003Ccode>useCallback\u003C\u002Fcode>\u003Cem> 吗？——手写 memo 与 Compiler 的取舍是现在的新考点\u003C\u002Fem>\u003C\u002Fp>\u003C\u002Fli>\u003Cli>\u003Cp>\u003Ccode>key\u003C\u002Fcode> 的作用与列表 diff、受控 vs 非受控组件\u003C\u002Fp>\u003C\u002Fli>\u003Cli>\u003Cp>Context 的性能问题与规避、自定义 Hook 抽象\u003C\u002Fp>\u003C\u002Fli>\u003Cli>\u003Cp>\u003Cstrong>Suspense 边界与错误边界\u003C\u002Fstrong>：加载态 \u002F 失败态降级设计——配合 \u003Ccode>use()\u003C\u002Fcode> 和 TanStack Query 的必问搭档\u003C\u002Fp>\u003C\u002Fli>\u003Cli>\u003Cp>React 19：\u003Ccode>use()\u003C\u002Fcode>、Actions、\u003Ccode>useOptimistic\u003C\u002Fcode>、\u003Ccode><Activity \u002F>\u003C\u002Fcode>、Server Components \u003Cem>是什么、解决什么问题\u003C\u002Fem>\u003C\u002Fp>\u003C\u002Fli>\u003C\u002Ful>\u003Ch3 id=\"必学数据与状态后端出身最容易上手的部分\">\u003Cspan style=\"color: #B54A2E\">【必学】\u003C\u002Fspan>数据与状态（后端出身最容易上手的部分）\u003Ca class=\"heading-anchor\" href=\"#必学数据与状态后端出身最容易上手的部分\" aria-hidden=\"true\">#\u003C\u002Fa>\u003C\u002Fh3>\u003Cul>\u003Cli>\u003Cp>\u003Cstrong>TanStack Query\u003C\u002Fstrong>：缓存、失效、乐观更新、重试——本质是客户端的缓存层，你天然懂\u003C\u002Fp>\u003C\u002Fli>\u003Cli>\u003Cp>\u003Cstrong>Zustand\u003C\u002Fstrong>：轻量客户端状态，现在的主流选择\u003C\u002Fp>\u003C\u002Fli>\u003Cli>\u003Cp>Redux Toolkit：概念级了解，大厂老项目会问\u003C\u002Fp>\u003C\u002Fli>\u003Cli>\u003Cp>\u003Cstrong>React Router v8\u003C\u002Fstrong>（2026-06 GA）：路由、守卫、动态菜单、middleware ⚠️ \u003Cstrong>大坑\u003C\u002Fstrong>：v8 移除了 \u003Ccode>react-router-dom\u003C\u002Fcode> 包（并入 \u003Ccode>react-router\u003C\u002Fcode>），网上绝大多数教程的 import 路径已失效；且 ESM-only、要求 Node 22+ \u002F Vite 7+\u003C\u002Fp>\u003C\u002Fli>\u003C\u002Ful>\u003Ch3 id=\"必学样式与组件库\">\u003Cspan style=\"color: #B54A2E\">【必学】\u003C\u002Fspan>样式与组件库\u003Ca class=\"heading-anchor\" href=\"#必学样式与组件库\" aria-hidden=\"true\">#\u003C\u002Fa>\u003C\u002Fh3>\u003Cul>\u003Cli>\u003Cp>\u003Cstrong>Flex + Grid 真的熟\u003C\u002Fstrong>（现场手写布局是常见考法）\u003C\u002Fp>\u003C\u002Fli>\u003Cli>\u003Cp>Tailwind CSS（已是事实标准）、CSS 变量、响应式断点\u003C\u002Fp>\u003C\u002Fli>\u003Cli>\u003Cp>\u003Cstrong>Ant Design v6\u003C\u002Fstrong>：会用 + \u003Cstrong>会二次封装\u003C\u002Fstrong> + 会改主题（CSS 变量默认开启的新主题体系）；能说清 v5→v6 迁移点：\u003Ccode>Button.Group\u003C\u002Fcode>→\u003Ccode>Space.Compact\u003C\u002Fcode>、\u003Ccode>BackTop\u003C\u002Fcode>→\u003Ccode>FloatButton\u003C\u002Fcode>、\u003Ccode>xxxClassName\u003C\u002Fcode> 收敛到 \u003Ccode>classNames.*\u003C\u002Fcode>。Vue 侧对应 Element Plus\u003C\u002Fp>\u003C\u002Fli>\u003C\u002Ful>\u003Ch3 id=\"必学浏览器与网络\">\u003Cspan style=\"color: #B54A2E\">【必学】\u003C\u002Fspan>浏览器与网络\u003Ca class=\"heading-anchor\" href=\"#必学浏览器与网络\" aria-hidden=\"true\">#\u003C\u002Fa>\u003C\u002Fh3>\u003Cblockquote>\u003Cp>你的天然优势区，务必答出深度\u003C\u002Fp>\u003C\u002Fblockquote>\u003Cul>\u003Cli>\u003Cp>事件循环（宏任务 \u002F 微任务）——输出顺序题必考\u003C\u002Fp>\u003C\u002Fli>\u003Cli>\u003Cp>事件冒泡 \u002F 捕获 \u002F 委托\u003C\u002Fp>\u003C\u002Fli>\u003Cli>\u003Cp>\u003Cstrong>跨域\u003C\u002Fstrong>：CORS 预检、\u003Ccode>withCredentials\u003C\u002Fcode>、Nginx 代理——前后端两个视角都要讲\u003C\u002Fp>\u003C\u002Fli>\u003Cli>\u003Cp>缓存：强缓存 \u002F 协商缓存、\u003Ccode>Cache-Control\u003C\u002Fcode> \u002F \u003Ccode>ETag\u003C\u002Fcode>\u003C\u002Fp>\u003C\u002Fli>\u003Cli>\u003Cp>\u003Cstrong>鉴权链路\u003C\u002Fstrong>：JWT vs Session、refresh token 无感刷新、SSO \u002F OAuth2——全栈岗最爱的交叉题\u003C\u002Fp>\u003C\u002Fli>\u003Cli>\u003Cp>Cookie \u002F localStorage \u002F sessionStorage 区别、SameSite、XSS 与 CSRF 防御\u003C\u002Fp>\u003C\u002Fli>\u003C\u002Ful>\u003Ch3 id=\"必学js-八股与手写题国内仍考但考法变了\">\u003Cspan style=\"color: #B54A2E\">【必学】\u003C\u002Fspan>JS 八股与手写题（国内仍考，但考法变了）\u003Ca class=\"heading-anchor\" href=\"#必学js-八股与手写题国内仍考但考法变了\" aria-hidden=\"true\">#\u003C\u002Fa>\u003C\u002Fh3>\u003Cul>\u003Cli>\u003Cp>原型链、\u003Ccode>this\u003C\u002Fcode> 指向、闭包\u003C\u002Fp>\u003C\u002Fli>\u003Cli>\u003Cp>手写：防抖、节流、深拷贝、\u003Ccode>call\u002Fapply\u002Fbind\u003C\u002Fcode>、\u003Ccode>Promise.all\u003C\u002Fcode>、简易 Promise\u003C\u002Fp>\u003C\u002Fli>\u003Cli>\u003Cp>Promise \u002F async-await 执行顺序题（配合事件循环一起练）\u003C\u002Fp>\u003C\u002Fli>\u003C\u002Ful>\u003Cblockquote>\u003Cp>\u003Cstrong>考法变化\u003C\u002Fstrong>：现在越来越多是给你一段（人或 AI 写的）防抖 \u002F 深拷贝，让你\u003Cstrong>指出 bug 和边界漏洞\u003C\u002Fstrong>，而不是默写。练到「能读、能挑错」比「能背出来」更贴近 2026 的实际考法——但默写能力仍是底线。\u003C\u002Fp>\u003C\u002Fblockquote>\u003Ch3 id=\"必学构建与工程化\">\u003Cspan style=\"color: #B54A2E\">【必学】\u003C\u002Fspan>构建与工程化\u003Ca class=\"heading-anchor\" href=\"#必学构建与工程化\" aria-hidden=\"true\">#\u003C\u002Fa>\u003C\u002Fh3>\u003Cul>\u003Cli>\u003Cp>\u003Cstrong>Vite 8 + Rolldown\u003C\u002Fstrong>：环境变量、代理配置、构建产物 ⚠️ 「dev 用 esbuild 预构建、build 用 Rollup」这个经典答案已过期——Vite 8（2026-03）已用 Rolldown 统一取代双打包器。现在问的是为什么合并、dev\u002Fbuild 一致性\u003C\u002Fp>\u003C\u002Fli>\u003Cli>\u003Cp>Webpack 概念级：loader \u002F plugin \u002F tree shaking \u002F code splitting；\u003Cstrong>外加 Rspack \u002F Rsbuild\u003C\u002Fstrong>（字节系及外溢团队大量在用，比纯 Webpack 更可能被问）\u003C\u002Fp>\u003C\u002Fli>\u003Cli>\u003Cp>pnpm、ESLint + Prettier、Husky；Monorepo 知道是什么即可\u003C\u002Fp>\u003C\u002Fli>\u003Cli>\u003Cp>\u003Cstrong>前端供应链安全\u003C\u002Fstrong>：npm 投毒防护、lockfile 管理、CSP 配置、为什么 pnpm 的隔离 node_modules 更安全——2025 年 npm 蠕虫事件后已成常见工程题\u003C\u002Fp>\u003C\u002Fli>\u003C\u002Ful>\u003Ch3 id=\"够用加分项能讲清楚做过一次就行\">\u003Cspan style=\"color: #7A5C1E\">【够用】\u003C\u002Fspan>加分项——能讲清楚，做过一次就行\u003Ca class=\"heading-anchor\" href=\"#够用加分项能讲清楚做过一次就行\" aria-hidden=\"true\">#\u003C\u002Fa>\u003C\u002Fh3>\u003Cul>\u003Cli>\u003Cp>\u003Cstrong>Next.js 16\u003C\u002Fstrong>：App Router、\u003Cstrong>Cache Components（\u003C\u002Fstrong>\u003Ccode>use cache\u003C\u002Fcode>\u003Cstrong>）新缓存模型\u003C\u002Fstrong>、RSC \u002F Server Actions、Turbopack 默认、\u003Ccode>middleware.ts\u003C\u002Fcode>→\u003Ccode>proxy.ts\u003C\u002Fcode>。\u003Cem>外企和海外远程加分很大\u003C\u002Fem> ⚠️ 只说「SSR\u002FSSG\u002FISR」会暴露知识停在两年前——要能对比新旧缓存心智模型\u003C\u002Fp>\u003C\u002Fli>\u003Cli>\u003Cp>\u003Cstrong>Node.js \u002F BFF 层\u003C\u002Fstrong>：Node 事件循环与浏览器的差异、Express\u002FNest 基本盘、BFF 的职责边界与鉴权透传 \u003Cem>你有后端底子，这是最容易讲出深度的桥梁话题，外企和 Next.js server 侧常问\u003C\u002Fem>\u003C\u002Fp>\u003C\u002Fli>\u003Cli>\u003Cp>性能：Core Web Vitals（LCP \u002F CLS \u002F INP）、代码分割、虚拟列表、图片优化、首屏优化 \u003Cem>标准是能说出你在项目里做了哪两条 + 具体数字\u003C\u002Fem>\u003C\u002Fp>\u003C\u002Fli>\u003Cli>\u003Cp>部署：Docker、Nginx 反代 + gzip、HTTPS、GitHub Actions CI——\u003Cem>你有后端背景，这块最容易讲成亮点\u003C\u002Fem>\u003C\u002Fp>\u003C\u002Fli>\u003Cli>\u003Cp>测试：Vitest + React Testing Library 会写基础用例（外企常问，国内几乎不问）\u003C\u002Fp>\u003C\u002Fli>\u003Cli>\u003Cp>Sentry 前端错误监控 \u002F 简单埋点\u003C\u002Fp>\u003C\u002Fli>\u003C\u002Ful>\u003Ch3 id=\"别学除非目标-jd-明确写了\">\u003Cspan style=\"color: #6B6864\">【别学】\u003C\u002Fspan>除非目标 JD 明确写了\u003Ca class=\"heading-anchor\" href=\"#别学除非目标-jd-明确写了\" aria-hidden=\"true\">#\u003C\u002Fa>\u003C\u002Fh3>\u003Cp>\u003Cspan style=\"color: #7A7671\">React\u002FVue 源码级 diff、Fiber 调度器手写 · 微前端（qiankun \u002F Module Federation）· Angular \u002F Svelte \u002F Solid · Canvas \u002F WebGL \u002F Three.js \u002F D3 深度 · React Native \u002F Flutter · 小程序 · 自己写脚手架 · 前端算法刷到 Hard\u003C\u002Fspan>\u003C\u002Fp>\u003Cp>这些是\u003Cstrong>专职前端岗\u003C\u002Fstrong>的深水区。你面的是全栈或后端，问到那个深度的概率极低，而每一项都要吃掉两三周。\u003C\u002Fp>\u003Ch3 id=\"压舱石后端不能丢它占面试权重-60-以上\">\u003Cspan style=\"color: #2E5F52\">【压舱石】\u003C\u002Fspan>后端不能丢——它占面试权重 60% 以上\u003Ca class=\"heading-anchor\" href=\"#压舱石后端不能丢它占面试权重-60-以上\" aria-hidden=\"true\">#\u003C\u002Fa>\u003C\u002Fh3>\u003Cul>\u003Cli>\u003Cp>\u003Cstrong>Java 21 \u002F 25 新特性\u003C\u002Fstrong>（25 是最新 LTS）：record、sealed、模式匹配、Scoped Values、结构化并发、\u003Cstrong>虚拟线程\u003C\u002Fstrong> ⚠️ 别再背「\u003Ccode>synchronized\u003C\u002Fcode> 会 pin 住载体线程」——JDK 24 的 JEP 491 之后已不成立，剩余 pin 场景只有 native 栈帧和类初始化；瓶颈已转移到连接池等有限资源的池化上。答旧版会被反问\u003C\u002Fp>\u003C\u002Fli>\u003Cli>\u003Cp>\u003Cstrong>Spring Boot 4 \u002F Spring Framework 7\u003C\u002Fstrong>（3.5 的 OSS 支持已于 2026-06 终止）：3.x→4.x 迁移（Jakarta EE 11、\u003Cstrong>Jackson 3 强制\u003C\u002Fstrong>、JUnit 4 移除）、API 版本化、\u003Ccode>@HttpExchange\u003C\u002Fcode> 声明式客户端取代 OpenFeign、内置 \u003Ccode>@Retryable\u003C\u002Fcode>\u002F\u003Ccode>@ConcurrencyLimit\u003C\u002Fcode>、JSpecify 空安全 \u003Cem>现在面试问的迁移故事是 3.x→4.x，不是 2.x→3.x\u003C\u002Fem>\u003C\u002Fp>\u003C\u002Fli>\u003Cli>\u003Cp>并发：线程池参数与调优、AQS、CAS、ThreadLocal 内存泄漏、锁升级\u003C\u002Fp>\u003C\u002Fli>\u003Cli>\u003Cp>JVM：内存结构、G1 \u002F ZGC 选型（分代 ZGC 已是默认，非分代版在 JDK 24 移除）、\u003Cstrong>一次真实的 OOM 或 GC 排查故事\u003C\u002Fstrong>\u003C\u002Fp>\u003C\u002Fli>\u003Cli>\u003Cp>MySQL：索引结构与失效、执行计划、MVCC 与隔离级别、分库分表、慢 SQL 优化案例\u003C\u002Fp>\u003C\u002Fli>\u003Cli>\u003Cp>Redis：数据结构、持久化、穿透\u002F击穿\u002F雪崩、分布式锁（Redisson 看门狗）\u003C\u002Fp>\u003C\u002Fli>\u003Cli>\u003Cp>MQ：Kafka \u002F RocketMQ 顺序、重复消费、积压处理、事务消息\u003C\u002Fp>\u003C\u002Fli>\u003Cli>\u003Cp>分布式：CAP、分布式事务方案、幂等设计、限流熔断\u003C\u002Fp>\u003C\u002Fli>\u003Cli>\u003Cp>\u003Cstrong>系统设计\u003C\u002Fstrong>：练 5–8 个经典题（短链、秒杀、Feed 流、IM、对账）——外企和大厂必考\u003C\u002Fp>\u003C\u002Fli>\u003C\u002Ful>\u003Chr\u002F>\u003Ch2 id=\"04--ai-开发能力2026-的真正差异化\">04 · AI 开发能力：2026 的真正差异化\u003Ca class=\"heading-anchor\" href=\"#04--ai-开发能力2026-的真正差异化\" aria-hidden=\"true\">#\u003C\u002Fa>\u003C\u002Fh2>\u003Cp>你提到后续开发都会用 AI——这是对的，但面试里**\"会用 AI\"已经不是加分项，是默认项**。真正拉开差距的是下面第 2 条。\u003C\u002Fp>\u003Cul>\u003Cli>\u003Cp>\u003Cstrong>1 · 会用\u003C\u002Fstrong>：Cursor \u002F Claude Code \u002F Copilot 的实际工作流，能说清你把哪类任务交给 AI、哪类不交\u003C\u002Fp>\u003C\u002Fli>\u003Cli>\u003Cp>\u003Cstrong>2 · 会审（最重要）\u003C\u002Fstrong>：准备一个具体案例——AI 生成的代码有什么坑（并发不安全、边界条件漏了、N+1 查询、SQL 注入、事务边界错了），\u003Cstrong>你怎么发现的、怎么修的\u003C\u002Fstrong>。这道题现在几乎每个面试官都会变着法问，而大部分候选人答不具体。\u003C\u002Fp>\u003C\u002Fli>\u003Cli>\u003Cp>\u003Cstrong>3 · 加分\u003C\u002Fstrong>：Spring AI 或 LangChain4j、RAG 基本流程、向量库、function calling 与 \u003Cstrong>MCP\u003C\u002Fstrong>（server \u002F client 概念、和 function calling 的关系——2026 年已是工具接入的事实标准，Spring AI 已支持）。在项目里做一个小 demo，简历上就多一条硬通货。\u003C\u002Fp>\u003C\u002Fli>\u003Cli>\u003Cp>\u003Cstrong>4 · 两种现场编程都要准备\u003C\u002Fstrong>——2026 年已经明显分化：\u003C\u002Fp>\u003Cul>\u003Cli>\u003Cp>\u003Cstrong>A · 裸写场\u003C\u002Fstrong>：仍有大量公司禁用 AI，八股和手写题必须能裸写。长期依赖 AI 后手会生，务必留裸写练习时间。\u003C\u002Fp>\u003C\u002Fli>\u003Cli>\u003Cp>\u003Cstrong>B · 带 AI 实操场\u003C\u002Fstrong>：部分大厂和外企设了「现场用 Cursor \u002F Claude Code 完成一个功能」的专项环节，考的是\u003Cstrong>把模糊需求拆成可交付给 AI 的子任务 → 中途改需求 → 当场定位 AI 写出的 bug\u003C\u002Fstrong>。这个要专门练，不是\"平时会用\"就能过。\u003C\u002Fp>\u003C\u002Fli>\u003C\u002Ful>\u003C\u002Fli>\u003C\u002Ful>\u003Cblockquote>\u003Cp>让 AI 输出\u003Cstrong>方案\u003C\u002Fstrong>而不是直接输出代码，方案评审通过后再让它写实现——这个工作流本身就是个很好的面试答案。\u003C\u002Fp>\u003C\u002Fblockquote>\u003Chr\u002F>\u003Ch2 id=\"05--项目做-1-个真的别做-3-个-demo\">05 · 项目：做 1 个真的，别做 3 个 demo\u003Ca class=\"heading-anchor\" href=\"#05--项目做-1-个真的别做-3-个-demo\" aria-hidden=\"true\">#\u003C\u002Fa>\u003C\u002Fh2>\u003Cp>面试官对 demo 免疫。有价值的项目只有一个标准：\u003Cstrong>有真实复杂度，且真的上线了\u003C\u002Fstrong>。能在面试里甩出一个可访问的链接，权重完全不同。\u003C\u002Fp>\u003Ch3 id=\"推荐选题多租户-tob-后台系统\">推荐选题：多租户 ToB 后台系统\u003Ca class=\"heading-anchor\" href=\"#推荐选题多租户-tob-后台系统\" aria-hidden=\"true\">#\u003C\u002Fa>\u003C\u002Fh3>\u003Cp>一个项目同时覆盖前端、后端、部署、AI 四块，性价比最高。\u003C\u002Fp>\u003Ctable style=\"min-width: 50px\">\u003Ccolgroup>\u003Ccol style=\"min-width: 25px\"\u002F>\u003Ccol style=\"min-width: 25px\"\u002F>\u003C\u002Fcolgroup>\u003Ctbody>\u003Ctr>\u003Cth colspan=\"1\" rowspan=\"1\">\u003Cp>层\u003C\u002Fp>\u003C\u002Fth>\u003Cth colspan=\"1\" rowspan=\"1\">\u003Cp>内容\u003C\u002Fp>\u003C\u002Fth>\u003C\u002Ftr>\u003Ctr>\u003Ctd colspan=\"1\" rowspan=\"1\">\u003Cp>\u003Cstrong>后端\u003C\u002Fstrong>\u003C\u002Fp>\u003C\u002Ftd>\u003Ctd colspan=\"1\" rowspan=\"1\">\u003Cp>Spring Boot 4 + Java 21\u002F25 + MySQL + Redis；\u003Cstrong>RBAC 权限\u003C\u002Fstrong>、\u003Cstrong>异步大数据量导出\u003C\u002Fstrong>（分页游标 + 流式写）、SSE 实时进度推送\u003C\u002Fp>\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd colspan=\"1\" rowspan=\"1\">\u003Cp>\u003Cstrong>前端\u003C\u002Fstrong>\u003C\u002Fp>\u003C\u002Ftd>\u003Ctd colspan=\"1\" rowspan=\"1\">\u003Cp>React 19 + TS + Vite 8 + Tailwind + AntD v6 + React Router v8 + TanStack Query + Zustand；动态路由与菜单、按钮级权限、可配置表格、大表格虚拟滚动\u003C\u002Fp>\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd colspan=\"1\" rowspan=\"1\">\u003Cp>\u003Cstrong>交付\u003C\u002Fstrong>\u003C\u002Fp>\u003C\u002Ftd>\u003Ctd colspan=\"1\" rowspan=\"1\">\u003Cp>Docker Compose + Nginx + HTTPS + GitHub Actions CI，\u003Cstrong>买个域名真的部署上去\u003C\u002Fstrong>\u003C\u002Fp>\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd colspan=\"1\" rowspan=\"1\">\u003Cp>\u003Cstrong>可选（三选一）\u003C\u002Fstrong>\u003C\u002Fp>\u003C\u002Ftd>\u003Ctd colspan=\"1\" rowspan=\"1\">\u003Cp>多租户数据隔离 · 审计日志 · AI 特性（自然语言查报表，Spring AI + function calling）\u003C\u002Fp>\u003C\u002Ftd>\u003C\u002Ftr>\u003C\u002Ftbody>\u003C\u002Ftable>\u003Cblockquote>\u003Cp>\u003Cstrong>范围控制很重要。\u003C\u002Fstrong>「RBAC + 异步流式导出 + SSE 进度」是最能讲出故事的一条链路，务必做扎实；多租户隔离 \u002F 审计日志 \u002F AI 特性\u003Cstrong>只挑一个\u003C\u002Fstrong>。全做完按业余节奏要 150–250 小时，会直接吃掉你整个 6 个月。\u003C\u002Fp>\u003C\u002Fblockquote>\u003Ch3 id=\"讲项目的模板动作--数字\">讲项目的模板：动作 → 数字\u003Ca class=\"heading-anchor\" href=\"#讲项目的模板动作--数字\" aria-hidden=\"true\">#\u003C\u002Fa>\u003C\u002Fh3>\u003Cblockquote>\u003Cp>\"导出原来是同步的，10 万行直接卡死。我改成异步任务 + 分页游标 + SXSSF 流式写，接口从 60s 超时变成 200ms 返回任务 ID，导出总耗时 90s，内存峰值从 1.8G 降到 200M。前端配合用 SSE 推进度条，避免了轮询。\"\u003C\u002Fp>\u003C\u002Fblockquote>\u003Cp>注意这段话同时体现了：性能意识、前后端协作、技术选型理由、量化结果。每个核心模块都准备一段这样的话。\u003C\u002Fp>\u003Chr\u002F>\u003Ch2 id=\"06--6-个月周计划\">06 · 6 个月周计划\u003Ca class=\"heading-anchor\" href=\"#06--6-个月周计划\" aria-hidden=\"true\">#\u003C\u002Fa>\u003C\u002Fh2>\u003Cp>按业余每周 10–15 小时估算，总盘子 240–360 小时。下面排的是\u003Cstrong>约 20 周的量装进 24 周\u003C\u002Fstrong>——M2 和 M4 各含 1 周机动，不留 buffer 的排期会被任何一次加班或病假推倒。\u003C\u002Fp>\u003Ch3 id=\"两条贯穿全程不占周次的任务\">两条贯穿全程、不占周次的任务\u003Ca class=\"heading-anchor\" href=\"#两条贯穿全程不占周次的任务\" aria-hidden=\"true\">#\u003C\u002Fa>\u003C\u002Fh3>\u003Cul>\u003Cli>\u003Cp>\u003Cstrong>算法\u003C\u002Fstrong>　从第 1 周起\u003Cstrong>每天 1 题\u003C\u002Fstrong>，贯穿 24 周（累计约 170 题次，够 Hot 100 + 二刷）。\u003Cem>别信「一周刷完 Hot 100」——对 5 年没碰算法的人那是 60–100 小时的量。\u003C\u002Fem>\u003C\u002Fp>\u003C\u002Fli>\u003Cli>\u003Cp>\u003Cstrong>投递\u003C\u002Fstrong>　从 \u003Cstrong>W12 项目上线当周\u003C\u002Fstrong>开始，每周投 2–3 家备胎公司，每两周至少一场真实面试。M4–M6 是「边面边补」，不是「面完再投」。\u003C\u002Fp>\u003C\u002Fli>\u003C\u002Ful>\u003Cblockquote>\u003Cp>\u003Cstrong>如果只有 3 个月：换目标，不要压时间。\u003C\u002Fstrong> 6 周内从零前端做到项目上线不现实。改成——在现在公司里主动接一个前端模块（有真实业务背书胜过任何个人项目）+ 后端系统复习 + \u003Cstrong>直接投后端岗，全栈作为加分项\u003C\u002Fstrong>。等入职后再补齐前端深度。\u003C\u002Fp>\u003C\u002Fblockquote>\u003Ch3 id=\"m1--第-14-周前端地基\">M1 · 第 1–4 周｜前端地基\u003Ca class=\"heading-anchor\" href=\"#m1--第-14-周前端地基\" aria-hidden=\"true\">#\u003C\u002Fa>\u003C\u002Fh3>\u003Cul>\u003Cli>\u003Cp>\u003Cstrong>W1\u003C\u002Fstrong>　\u003Cstrong>现代 JS 专项\u003C\u002Fstrong>：this \u002F 闭包 \u002F 原型 \u002F 事件循环 \u002F Promise \u002F 模块（\u003Cem>先 JS 后 TS，反过来学会很痛苦\u003C\u002Fem>）\u003C\u002Fp>\u003C\u002Fli>\u003Cli>\u003Cp>\u003Cstrong>W2\u003C\u002Fstrong>　TypeScript 主干（泛型、工具类型、类型收窄）+ Vite 8 搭起来 + Tailwind 上手\u003C\u002Fp>\u003C\u002Fli>\u003Cli>\u003Cp>\u003Cstrong>W3\u003C\u002Fstrong>　React Hooks 核心心智模型 + 组件拆分\u003C\u002Fp>\u003C\u002Fli>\u003Cli>\u003Cp>\u003Cstrong>W4\u003C\u002Fstrong>　AntD v6 + React Router v8 + 一个能跑的 CRUD 列表页（对接你自己写的 Spring Boot 接口）\u003C\u002Fp>\u003C\u002Fli>\u003C\u002Ful>\u003Cblockquote>\u003Cp>\u003Cstrong>里程碑\u003C\u002Fstrong>　能看懂并改动一个现成中后台模板，\u003Cstrong>独立产出一个能跑的 CRUD 列表页\u003C\u002Fstrong> \u003Cem>刻意降低了标准：40–60 小时不可能达到「独立 + 讲得出取舍」。分页、按钮级权限、无感刷新挪到 M2。\u003C\u002Fem>\u003C\u002Fp>\u003C\u002Fblockquote>\u003Ch3 id=\"m2--第-58-周项目主干\">M2 · 第 5–8 周｜项目主干\u003Ca class=\"heading-anchor\" href=\"#m2--第-58-周项目主干\" aria-hidden=\"true\">#\u003C\u002Fa>\u003C\u002Fh3>\u003Cul>\u003Cli>\u003Cp>\u003Cstrong>W5\u003C\u002Fstrong>　TanStack Query + Zustand + 鉴权链路（JWT + 无感刷新）+ 分页与表单\u003C\u002Fp>\u003C\u002Fli>\u003Cli>\u003Cp>\u003Cstrong>W6\u003C\u002Fstrong>　项目后端骨架：RBAC + 异步流式导出（+ 三选一的那个可选模块）\u003C\u002Fp>\u003C\u002Fli>\u003Cli>\u003Cp>\u003Cstrong>W7\u003C\u002Fstrong>　项目前端骨架：动态菜单、按钮级权限、可配置表格、SSE 导出进度\u003C\u002Fp>\u003C\u002Fli>\u003Cli>\u003Cp>\u003Cstrong>W8\u003C\u002Fstrong>　\u003Cem>机动周\u003C\u002Fem>——补上前 7 周欠的账，别拿来加新内容\u003C\u002Fp>\u003C\u002Fli>\u003C\u002Ful>\u003Cblockquote>\u003Cp>\u003Cstrong>里程碑\u003C\u002Fstrong>　核心业务链路端到端跑通\u003C\u002Fp>\u003C\u002Fblockquote>\u003Ch3 id=\"m3--第-912-周交付能力\">M3 · 第 9–12 周｜交付能力\u003Ca class=\"heading-anchor\" href=\"#m3--第-912-周交付能力\" aria-hidden=\"true\">#\u003C\u002Fa>\u003C\u002Fh3>\u003Cul>\u003Cli>\u003Cp>\u003Cstrong>W9\u003C\u002Fstrong>　Next.js 16 \u003Cstrong>不写项目\u003C\u002Fstrong>——读文档 + 跑官方示例，练到能讲清 RSC 边界、Server Actions、Cache Components 新旧缓存差异即可（省下 20+ 小时）\u003C\u002Fp>\u003C\u002Fli>\u003Cli>\u003Cp>\u003Cstrong>W10\u003C\u002Fstrong>　性能优化：首屏、虚拟列表、代码分割 + Sentry 接入，\u003Cstrong>记录优化前后数字\u003C\u002Fstrong>\u003C\u002Fp>\u003C\u002Fli>\u003Cli>\u003Cp>\u003Cstrong>W11\u003C\u002Fstrong>　Docker + Nginx + HTTPS + CI，正式上线\u003C\u002Fp>\u003C\u002Fli>\u003Cli>\u003Cp>\u003Cstrong>W12\u003C\u002Fstrong>　写 README 和架构图 + \u003Cstrong>简历初稿，开始投备胎公司\u003C\u002Fstrong>\u003C\u002Fp>\u003C\u002Fli>\u003C\u002Ful>\u003Cblockquote>\u003Cp>\u003Cstrong>里程碑\u003C\u002Fstrong>　有一个能当场打开给面试官看的线上地址；\u003Cstrong>本周开始投递\u003C\u002Fstrong>\u003C\u002Fp>\u003C\u002Fblockquote>\u003Ch3 id=\"m4--第-1316-周后端回炉权重最高的一个月\">M4 · 第 13–16 周｜后端回炉（权重最高的一个月）\u003Ca class=\"heading-anchor\" href=\"#m4--第-1316-周后端回炉权重最高的一个月\" aria-hidden=\"true\">#\u003C\u002Fa>\u003C\u002Fh3>\u003Cul>\u003Cli>\u003Cp>\u003Cstrong>W13\u003C\u002Fstrong>　并发 + JVM + 一次真实的 GC \u002F OOM 排查复盘\u003C\u002Fp>\u003C\u002Fli>\u003Cli>\u003Cp>\u003Cstrong>W14\u003C\u002Fstrong>　MySQL + Redis 深度，结合你自己项目里的真实优化点\u003C\u002Fp>\u003C\u002Fli>\u003Cli>\u003Cp>\u003Cstrong>W15\u003C\u002Fstrong>　分布式 + MQ + 幂等 \u002F 限流 \u002F 熔断\u003C\u002Fp>\u003C\u002Fli>\u003Cli>\u003Cp>\u003Cstrong>W16\u003C\u002Fstrong>　Java 21\u002F25 新特性 + Spring Boot 4 \u002F Spring 7 变化与迁移（本周同时兼作机动周）\u003C\u002Fp>\u003C\u002Fli>\u003C\u002Ful>\u003Cblockquote>\u003Cp>\u003Cstrong>里程碑\u003C\u002Fstrong>　每个模块都能不看稿讲 3 分钟，且带一个自己的案例\u003C\u002Fp>\u003C\u002Fblockquote>\u003Ch3 id=\"m5--第-1720-周面试弹药\">M5 · 第 17–20 周｜面试弹药\u003Ca class=\"heading-anchor\" href=\"#m5--第-1720-周面试弹药\" aria-hidden=\"true\">#\u003C\u002Fa>\u003C\u002Fh3>\u003Cul>\u003Cli>\u003Cp>\u003Cstrong>W17\u003C\u002Fstrong>　前端八股 + 手写题，每天 2 道（裸写，不用 AI）\u003C\u002Fp>\u003C\u002Fli>\u003Cli>\u003Cp>\u003Cstrong>W18\u003C\u002Fstrong>　系统设计 5–8 题，每题写出完整方案文档\u003C\u002Fp>\u003C\u002Fli>\u003Cli>\u003Cp>\u003Cstrong>W19\u003C\u002Fstrong>　\u003Cstrong>带 AI 实操场专项练习\u003C\u002Fstrong>：给自己出 3 个模糊需求，限时用 Cursor \u002F Claude Code 完成并讲解——顺便攒下「AI 写错了什么、我怎么发现的」的真实素材\u003C\u002Fp>\u003C\u002Fli>\u003Cli>\u003Cp>\u003Cstrong>W20\u003C\u002Fstrong>　简历定稿（后端版 + 全栈版）+ 项目讲述稿，海外远程再加英文版\u003C\u002Fp>\u003C\u002Fli>\u003C\u002Ful>\u003Cblockquote>\u003Cp>\u003Cstrong>里程碑\u003C\u002Fstrong>　两版简历定稿；此时你已经面过几场，知道自己短板在哪\u003C\u002Fp>\u003C\u002Fblockquote>\u003Ch3 id=\"m6--第-2124-周实战\">M6 · 第 21–24 周｜实战\u003Ca class=\"heading-anchor\" href=\"#m6--第-2124-周实战\" aria-hidden=\"true\">#\u003C\u002Fa>\u003C\u002Fh3>\u003Cul>\u003Cli>\u003Cp>\u003Cstrong>W21–22\u003C\u002Fstrong>　集中投递目标公司，每场面完当天复盘，把被问倒的点当天补掉\u003C\u002Fp>\u003C\u002Fli>\u003Cli>\u003Cp>\u003Cstrong>W23–24\u003C\u002Fstrong>　谈 offer + 收尾；有余力就补 W9 省下的 Next.js 实操\u003C\u002Fp>\u003C\u002Fli>\u003C\u002Ful>\u003Cblockquote>\u003Cp>\u003Cstrong>关键\u003C\u002Fstrong>　真实面试反馈的信息量，比自己闷头复习一个月还大——所以投递从 W12 就开始，这两个月是收割期而不是起点。\u003C\u002Fp>\u003C\u002Fblockquote>\u003Chr\u002F>\u003Ch2 id=\"07--简历怎么写\">07 · 简历怎么写\u003Ca class=\"heading-anchor\" href=\"#07--简历怎么写\" aria-hidden=\"true\">#\u003C\u002Fa>\u003C\u002Fh2>\u003Ctable style=\"min-width: 50px\">\u003Ccolgroup>\u003Ccol style=\"min-width: 25px\"\u002F>\u003Ccol style=\"min-width: 25px\"\u002F>\u003C\u002Fcolgroup>\u003Ctbody>\u003Ctr>\u003Cth colspan=\"1\" rowspan=\"1\">\u003Cp>❌ 别这么写\u003C\u002Fp>\u003C\u002Fth>\u003Cth colspan=\"1\" rowspan=\"1\">\u003Cp>✅ 这么写\u003C\u002Fp>\u003C\u002Fth>\u003C\u002Ftr>\u003Ctr>\u003Ctd colspan=\"1\" rowspan=\"1\">\u003Cp>\u003Cspan style=\"color: #7A7671\">熟悉 React、Vue、Spring Boot、MySQL、Redis……\u003C\u002Fspan>\u003C\u002Fp>\u003C\u002Ftd>\u003Ctd colspan=\"1\" rowspan=\"1\">\u003Cp>独立负责 XX 中台从库表设计到上线部署：Spring Boot 4 + React 19 + TS，支撑 X 个租户 \u002F 日均 X 万请求\u003C\u002Fp>\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd colspan=\"1\" rowspan=\"1\">\u003Cp>\u003Cspan style=\"color: #7A7671\">负责系统的开发与维护\u003C\u002Fspan>\u003C\u002Fp>\u003C\u002Ftd>\u003Ctd colspan=\"1\" rowspan=\"1\">\u003Cp>将报表导出接口 P99 从 60s 降至 200ms，内存峰值下降 89%\u003C\u002Fp>\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd colspan=\"1\" rowspan=\"1\">\u003Cp>\u003Cspan style=\"color: #7A7671\">精通 Java、精通 Spring、精通 React\u003C\u002Fspan>\u003C\u002Fp>\u003C\u002Ftd>\u003Ctd colspan=\"1\" rowspan=\"1\">\u003Cp>技术栈分层写：精通 Java \u002F Spring · 熟练 React + TS · 了解 Next.js\u003C\u002Fp>\u003C\u002Ftd>\u003C\u002Ftr>\u003C\u002Ftbody>\u003C\u002Ftable>\u003Cul>\u003Cli>\u003Cp>全栈岗简历里\u003Cstrong>前端只占约 1\u002F3 篇幅\u003C\u002Fstrong>，别本末倒置\u003C\u002Fp>\u003C\u002Fli>\u003Cli>\u003Cp>每条经历带一个数字，没数字的经历考虑删掉\u003C\u002Fp>\u003C\u002Fli>\u003Cli>\u003Cp>准备\u003Cstrong>两版\u003C\u002Fstrong>：投大厂用后端版，投中小厂\u002F外企用全栈版\u003C\u002Fp>\u003C\u002Fli>\u003Cli>\u003Cp>海外远程：英文简历 + LinkedIn + GitHub 上有实质内容的项目；时区重叠范围和英文水平明确写出来\u003C\u002Fp>\u003C\u002Fli>\u003C\u002Ful>\u003Chr\u002F>\u003Ch2 id=\"08--八个最容易踩的坑\">08 · 八个最容易踩的坑\u003Ca class=\"heading-anchor\" href=\"#08--八个最容易踩的坑\" aria-hidden=\"true\">#\u003C\u002Fa>\u003C\u002Fh2>\u003Cul>\u003Cli>\u003Cp>\u003Cstrong>1\u003C\u002Fstrong>　前端答得太\"背\"。每个技术选型准备一句：\u003Cem>\"我们用 X 是因为 Y，代价是 Z。\"\u003C\u002Fem> 没有取舍的答案一听就是背的。\u003C\u002Fp>\u003C\u002Fli>\u003Cli>\u003Cp>\u003Cstrong>2\u003C\u002Fstrong>　\u003Ccode>useEffect\u003C\u002Fcode> 和闭包陷阱几乎必被问，必须真懂而不是记结论。\u003C\u002Fp>\u003C\u002Fli>\u003Cli>\u003Cp>\u003Cstrong>3\u003C\u002Fstrong>　说\"这块我用 AI 写的\"之后\u003Cstrong>一定要接上你怎么验证的\u003C\u002Fstrong>，否则直接减分。\u003C\u002Fp>\u003C\u002Fli>\u003Cli>\u003Cp>\u003Cstrong>4\u003C\u002Fstrong>　全栈岗最爱考\u003Cstrong>交叉题\u003C\u002Fstrong>：跨域怎么解决（前端代理 + 后端 CORS 两个视角都要说）、登录态怎么设计、大文件分片上传前后端怎么配合、前端如何配合做接口幂等。\u003C\u002Fp>\u003C\u002Fli>\u003Cli>\u003Cp>\u003Cstrong>5\u003C\u002Fstrong>　简历上写没真做过的技术。5 年经验被追问三层就穿帮，代价比不写大得多。\u003C\u002Fp>\u003C\u002Fli>\u003Cli>\u003Cp>\u003Cstrong>6\u003C\u002Fstrong>　只准备前端而荒废后端。这是转全栈最常见的死法——你的溢价来自后端深度。\u003C\u002Fp>\u003C\u002Fli>\u003Cli>\u003Cp>\u003Cstrong>7\u003C\u002Fstrong>　项目没上线。本地跑的 demo 和有线上地址的项目，可信度差一个数量级。\u003C\u002Fp>\u003C\u002Fli>\u003Cli>\u003Cp>\u003Cstrong>8\u003C\u002Fstrong>　等\"准备好了\"再投。项目上线那周（W12）就该开始投备胎练手，而不是等复习完。\u003C\u002Fp>\u003C\u002Fli>\u003C\u002Ful>\u003Chr\u002F>\u003Ch2 id=\"09--关于有发展工资好稳定的岗位定位\">09 · 关于\"有发展、工资好、稳定\"的岗位定位\u003Ca class=\"heading-anchor\" href=\"#09--关于有发展工资好稳定的岗位定位\" aria-hidden=\"true\">#\u003C\u002Fa>\u003C\u002Fh2>\u003Ch3 id=\"最优解通常是中大型-tob--行业头部公司的技术中台或平台组\">最优解通常是：中大型 ToB \u002F 行业头部公司的技术中台或平台组\u003Ca class=\"heading-anchor\" href=\"#最优解通常是中大型-tob--行业头部公司的技术中台或平台组\" aria-hidden=\"true\">#\u003C\u002Fa>\u003C\u002Fh3>\u003Cp>Java 为主 + 前端能自理，这类岗位对\"端到端交付\"有真实需求，薪资和稳定性的平衡点最好，也是全栈能力溢价最高的地方。\u003C\u002Fp>\u003Ch3 id=\"国内大厂投后端岗全栈当加分项\">国内大厂：投后端岗，全栈当加分项\u003Ca class=\"heading-anchor\" href=\"#国内大厂投后端岗全栈当加分项\" aria-hidden=\"true\">#\u003C\u002Fa>\u003C\u002Fh3>\u003Cp>大厂前后端分工很细，纯全栈岗位少。你 5 年经验的定位应该是后端，\"还能自己把前端写完\"是简历里的一句加分，不是主标签。\u003C\u002Fp>\u003Ch3 id=\"外企--海外远程薪资天花板高但两个门槛是硬的\">外企 \u002F 海外远程：薪资天花板高，但两个门槛是硬的\u003Ca class=\"heading-anchor\" href=\"#外企--海外远程薪资天花板高但两个门槛是硬的\" aria-hidden=\"true\">#\u003C\u002Fa>\u003C\u002Fh3>\u003Cp>英文（尤其口语和异步书面沟通）和系统设计。八股少、算法中等、更看重 Code Review 能力和工程素养。稳定性弱于国内，适合作为并行选项而不是唯一目标。\u003C\u002Fp>\u003Ch3 id=\"创业公司只在你认可业务和团队时考虑\">创业公司：只在你认可业务和团队时考虑\u003Ca class=\"heading-anchor\" href=\"#创业公司只在你认可业务和团队时考虑\" aria-hidden=\"true\">#\u003C\u002Fa>\u003C\u002Fh3>\u003Cp>全栈能力在这里最被需要，但\"稳定\"这条基本满足不了。\u003C\u002Fp>\u003Chr\u002F>\u003Ch2 id=\"版本信息与参考\">版本信息与参考\u003Ca class=\"heading-anchor\" href=\"#版本信息与参考\" aria-hidden=\"true\">#\u003C\u002Fa>\u003C\u002Fh2>\u003Cp>\u003Cstrong>版本信息截至 2026 年 8 月\u003C\u002Fstrong>：React 19.2 + React Compiler 1.0 · React Router v8 · Vite 8（Rolldown）· Next.js 16 · Ant Design v6 · Tailwind v4 · TypeScript 7（tsgo）· Java 25 LTS · Spring Boot 4 \u002F Spring Framework 7。技术版本变化很快，开始学之前建议再核一次官网。\u003C\u002Fp>\u003Cp>\u003Cstrong>参考\u003C\u002Fstrong>：\u003Ca target=\"_blank\" rel=\"noopener noreferrer\" href=\"https:\u002F\u002Fjavaguide.cn\u002Froadmap\u002Ffull-stack-roadmap.html\">JavaGuide 后端转全栈路线\u003C\u002Fa> · \u003Ca target=\"_blank\" rel=\"noopener noreferrer\" href=\"https:\u002F\u002Fwww.gumi.ink\u002Fposts\u002F2026-04-10-frontend-trends-2026\u002F\">2026 前端技术趋势观察\u003C\u002Fa> · \u003Ca target=\"_blank\" rel=\"noopener noreferrer\" href=\"https:\u002F\u002Fxtechtools.com\u002Flearn\u002Freact-vs-vue-2026\u002F\">React vs Vue 2026 招聘市场\u003C\u002Fa> · \u003Ca target=\"_blank\" rel=\"noopener noreferrer\" href=\"https:\u002F\u002Freact.dev\u002Fblog\u002F2025\u002F10\u002F07\u002Freact-compiler-1\">React Compiler 1.0\u003C\u002Fa> · \u003Ca target=\"_blank\" rel=\"noopener noreferrer\" href=\"https:\u002F\u002Fremix.run\u002Fblog\u002Freact-router-v8\">React Router v8\u003C\u002Fa> · \u003Ca target=\"_blank\" rel=\"noopener noreferrer\" href=\"https:\u002F\u002Fvite.dev\u002Fblog\u002Fannouncing-vite8\">Vite 8\u003C\u002Fa> · \u003Ca target=\"_blank\" rel=\"noopener noreferrer\" href=\"https:\u002F\u002Fnextjs.org\u002Fblog\u002Fnext-16\">Next.js 16\u003C\u002Fa> · \u003Ca target=\"_blank\" rel=\"noopener noreferrer\" href=\"https:\u002F\u002Fspring.io\u002Fblog\u002F2025\u002F11\u002F20\u002Fspring-boot-4-0-0-available-now\u002F\">Spring Boot 4\u003C\u002Fa> · \u003Ca target=\"_blank\" rel=\"noopener noreferrer\" href=\"https:\u002F\u002Fopenjdk.org\u002Fjeps\u002F491\">JEP 491\u003C\u002Fa>\u003C\u002Fp>",[21,25,29,32,35,38,41,44,47,50,53,56,59,62,65,68,71,74,77,80,83,86,89,92,95,98,101,104,107,110,113,116,119,122,125,128],{"id":22,"text":23,"level":24},"01--先说三个结论","01 · 先说三个结论",2,{"id":26,"text":27,"level":28},"-你不是转行是加技能别把时间投错地方","① 你不是转行，是加技能——别把时间投错地方",3,{"id":30,"text":31,"level":28},"-前端只需要到能独立交付并解释每个决策的程度","② 前端只需要到\"能独立交付并解释每个决策\"的程度",{"id":33,"text":34,"level":28},"-面大厂投后端面中小厂外企投全栈同一份准备两版简历","③ 面大厂投后端，面中小厂\u002F外企投全栈——同一份准备，两版简历",{"id":36,"text":37,"level":24},"02--框架选型react-主修vue-留一周","02 · 框架选型：React 主修，Vue 留一周",{"id":39,"text":40,"level":24},"03--技能清单学什么学到什么程度","03 · 技能清单：学什么、学到什么程度",{"id":42,"text":43,"level":28},"必学typescript","【必学】TypeScript",{"id":45,"text":46,"level":28},"必学react-核心权重最高的一块","【必学】React 核心（权重最高的一块）",{"id":48,"text":49,"level":28},"必学数据与状态后端出身最容易上手的部分","【必学】数据与状态（后端出身最容易上手的部分）",{"id":51,"text":52,"level":28},"必学样式与组件库","【必学】样式与组件库",{"id":54,"text":55,"level":28},"必学浏览器与网络","【必学】浏览器与网络",{"id":57,"text":58,"level":28},"必学js-八股与手写题国内仍考但考法变了","【必学】JS 八股与手写题（国内仍考，但考法变了）",{"id":60,"text":61,"level":28},"必学构建与工程化","【必学】构建与工程化",{"id":63,"text":64,"level":28},"够用加分项能讲清楚做过一次就行","【够用】加分项——能讲清楚，做过一次就行",{"id":66,"text":67,"level":28},"别学除非目标-jd-明确写了","【别学】除非目标 JD 明确写了",{"id":69,"text":70,"level":28},"压舱石后端不能丢它占面试权重-60-以上","【压舱石】后端不能丢——它占面试权重 60% 以上",{"id":72,"text":73,"level":24},"04--ai-开发能力2026-的真正差异化","04 · AI 开发能力：2026 的真正差异化",{"id":75,"text":76,"level":24},"05--项目做-1-个真的别做-3-个-demo","05 · 项目：做 1 个真的，别做 3 个 demo",{"id":78,"text":79,"level":28},"推荐选题多租户-tob-后台系统","推荐选题：多租户 ToB 后台系统",{"id":81,"text":82,"level":28},"讲项目的模板动作--数字","讲项目的模板：动作 → 数字",{"id":84,"text":85,"level":24},"06--6-个月周计划","06 · 6 个月周计划",{"id":87,"text":88,"level":28},"两条贯穿全程不占周次的任务","两条贯穿全程、不占周次的任务",{"id":90,"text":91,"level":28},"m1--第-14-周前端地基","M1 · 第 1–4 周｜前端地基",{"id":93,"text":94,"level":28},"m2--第-58-周项目主干","M2 · 第 5–8 周｜项目主干",{"id":96,"text":97,"level":28},"m3--第-912-周交付能力","M3 · 第 9–12 周｜交付能力",{"id":99,"text":100,"level":28},"m4--第-1316-周后端回炉权重最高的一个月","M4 · 第 13–16 周｜后端回炉（权重最高的一个月）",{"id":102,"text":103,"level":28},"m5--第-1720-周面试弹药","M5 · 第 17–20 周｜面试弹药",{"id":105,"text":106,"level":28},"m6--第-2124-周实战","M6 · 第 21–24 周｜实战",{"id":108,"text":109,"level":24},"07--简历怎么写","07 · 简历怎么写",{"id":111,"text":112,"level":24},"08--八个最容易踩的坑","08 · 八个最容易踩的坑",{"id":114,"text":115,"level":24},"09--关于有发展工资好稳定的岗位定位","09 · 关于\"有发展、工资好、稳定\"的岗位定位",{"id":117,"text":118,"level":28},"最优解通常是中大型-tob--行业头部公司的技术中台或平台组","最优解通常是：中大型 ToB \u002F 行业头部公司的技术中台或平台组",{"id":120,"text":121,"level":28},"国内大厂投后端岗全栈当加分项","国内大厂：投后端岗，全栈当加分项",{"id":123,"text":124,"level":28},"外企--海外远程薪资天花板高但两个门槛是硬的","外企 \u002F 海外远程：薪资天花板高，但两个门槛是硬的",{"id":126,"text":127,"level":28},"创业公司只在你认可业务和团队时考虑","创业公司：只在你认可业务和团队时考虑",{"id":129,"text":129,"level":24},"版本信息与参考","2026-08-13T07:06:07.291Z","2026-08-13T07:10:40.071Z",4917,15,12,"Java后端转全栈面试路线图（React+TS）","5年Java后端转React+TS全栈的6个月高效冲刺指南，覆盖大厂\u002F中小厂\u002F外企远程岗，含技能优先级、避坑清单与真实项目落地策略","Java转全栈,React TypeScript,前端面试,全栈路线图,后端转前端,大厂面试,外企远程,技术转型","b81fc8a3-b368-4758-9354-44bc827dea1c","c023459d-fed3-4bcd-831e-beef8a26700f",0,"original",null,"8e4d9712-16c7-4cc8-85ff-a6bbf10b0fd8","https:\u002F\u002Fmacbookpro99.oss-cn-shanghai.aliyuncs.com\u002Fuploads\u002F2026\u002F08\u002F0c7b19480147d70f8f9bc12266fae7104d58bc6fe8c160a8c6857b1c7e088848.webp",{"name":146,"slug":147},"日常","post-mrhvaoed",[149,152,155,158,161,164],{"name":150,"slug":151},"Java","java",{"name":153,"slug":154},"React","react",{"name":156,"slug":157},"TypeScript","typescript",{"name":159,"slug":160},"FullStack","fullstack",{"name":162,"slug":163},"Frontend","frontend",{"name":165,"slug":166},"Full-Stack","full-stack",{"name":168,"slug":169,"position":170,"total":170},"AI开发","ai",1,{"slug":172,"title":173},"ai-daily-2026-08-13","AI 日报 · 2026-08-13",[175,178,181],{"slug":176,"title":177,"readingTimeMinutes":28},"ai-daily-2026-07-24","AI 日报 · 2026-07-24",{"slug":179,"title":180,"readingTimeMinutes":24},"ai-daily-2026-08-08","AI 日报 · 2026-08-08",{"slug":182,"title":183,"readingTimeMinutes":28},"ai-daily-2026-08-05","AI 日报 · 2026-08-05",{},{"total":140,"items":186},[]]