第1章：岗位能力画像与简历优化模板
本章聚焦于React架构工程师的岗位能力拆解与简历打磨。你将获得一张清晰的能力画像图、一份结构化简历模板、一份高频关键词清单，以及3个面试问答示范，帮助你从能力到表达对齐大厂面试标准。
图1：岗位能力画像 · 五大核心维度
关键词清单（HR/技术面高频检索）
| 类别 | 关键词 | 优先级 | 使用场景 |
|---|---|---|---|
| 框架内核 | Fiber、Hooks、Suspense、Concurrent Mode | ★★★★★ | 技术面深问 |
| 工程工具 | Webpack/Vite、Babel、ESLint、Monorepo | ★★★★☆ | 简历/项目 |
| 状态管理 | Redux Toolkit、Zustand、Recoil、Jotai | ★★★★☆ | 架构设计 |
| 性能 | memo、useMemo、虚拟列表、Bundle分析 | ★★★★★ | 优化案例 |
| 协作 | Code Review、设计文档、组件库、Storybook | ★★★☆☆ | 行为面 |
“主导XXX重构，使首屏加载从X秒降至Y秒，LCP提升Z%”
“设计XXX架构，支撑日均PV 500万+，线上故障率低于0.01%”
“推动组件库建设，复用率达85%，减少重复开发工时约30人/月”
面试问答示例
Q1：请描述你参与过的最复杂的前端架构项目，你在其中承担了什么角色？
面试官考察点：架构思维、项目复杂度理解、个人贡献边界、量化成果意识。
回答框架：STAR法则 → 背景(S) → 挑战(T) → 行动(A) → 结果(R)
简短示例回答：“主导电商中台微前端改造，原有巨石应用5分钟冷启。我采用qiankun + Module Federation拆分5子应用，设计公共基建SDK。项目上线后冷启降至8秒，部署效率提升70%，支撑双11峰值2万QPS。”
可能追问：“为什么选择qiankun而不是iframe？” “如何解决子应用间样式冲突？”
Q2：你是如何优化React应用性能的？请举例说明。
面试官考察点：性能问题定位&分析能力、工具链使用、优化策略选择、ROI意识。
回答框架：问题发现 → 工具验证 → 优化动作 → 效果量化
简短示例回答：“使用React Profiler发现列表页重渲染瓶颈，用useMemo+虚拟列表（react-window）优化，同时配合Bundle Analyzer拆分大依赖。最终列表滚动帧率从20fps提升至55fps，总体积减少40%。”
可能追问：“为什么不用React.memo？它和useMemo的区别？” “虚拟列表在动态高度场景如何处理？”
Q3：你如何设计可复用的组件？请结合实践说明你的设计原则。
面试官考察点：组件抽象能力、接口设计、单一职责、扩展性/组合思想。
回答框架：原则陈述 → 具体组件示例 → 设计取舍 → 团队落地效果
简短示例回答：“遵循单一职责和组合优于继承。例如设计Table组件，将数据加载、排序、分页拆成独立hooks + render props。业务方通过组合渲染列模板，组件库复用率达85%，需求变更迭代周期缩短60%。”
可能追问：“如果某业务需要表格内嵌表单，你会如何设计？” “你认为可控组件和不可控组件的选择标准？”
简历结构建议（大厂通配模板）
| 模块 | 内容要点 | 示例 |
|---|---|---|
| 个人信息 | 姓名+手机+邮箱+GitHub/掘金 | 张三 | 138xxxx | zhangsan@dev.com |
| 技术栈 | React生态+工程化+通用技术 | React 18 / TypeScript / Next.js / Webpack |
| 工作经历 | 公司-职位-时间，每个项目3~5条STAR点 | 字节跳动 前端架构师 2020-2023 |
| 项目亮点 | 选2~3个核心项目，每个200字左右 | 中台微前端改造（见上方示例回答） |
| 成果量化 | 每个项目至少1个具体数字 | 性能提升70%、故障率<0.01% |
| 自我评价 | 聚焦架构能力+团队影响力，不超过3行 | 推动前端技术标准化，具备跨端架构经验 |
① 对照能力画像，检查自己每个维度的项目证据是否充分。
② 将简历中的“职责描述”全部替换为“成果量化句式”，确保每句话都带数字。
③ 重点准备Q1、Q2、Q3三个典型问题的STAR版本，并预演追问。