结合你的简历内容和技术面试问题，以下是一个结构化的回答建议，突出你的技术深度和项目经验：

2. 项目与实习经历

得物低代码落地页编辑器（核心项目）

背景：解决软广落地页开发周期长、迭代慢问题。
技术方案：
- B端：基于Iframe + Valtio状态管理 + Next.js SSR，实现实时预览（消除手动刷新）。
- C端：Next.js混合渲染 + 背景图预加载 + 组件懒加载 + 降级策略，首屏秒开率从15%→65%。
工程化：Monorepo + Turborepo + Git流程管理，保障迭代效率。
成果：支持拖拽编排与动态表单配置，统一集成异构模型（.dll/.exe/.py）。

智能博客AI平台（字节青训营）

痛点：解决博客平台AI多模态缺失（如图片/文档解析）。
方案：
- 后端集成Coze Agent服务，SSE流式返回结果。
- 前端封装对话框组件，支持多模态输入（文本/图片/PDF）及智能输出（Markdown/Mermaid）。
优化：OAuth2鉴权 + ESWrapper解耦SSE逻辑，提升复用率。

个人网站（技术亮点）

WebGL动态粒子背景 + ECharts可视化 + 地图轨迹API。
自研设备监听Hooks实现跨端响应式，部署前端监控与安全策略。

3. 代码考察

（1）this指向问题

function Person() {this.name = "Liu";setTimeout(function() {console.log(this.name); // 输出undefined（非严格模式为window）}, 1000);
}
new Person();

👉 修正：改用箭头函数（继承外层this）或bind。

（2）Promise透传陷阱

Promise.resolve(1).then(() => {}) // 未传参 ⇒ 值透传到下一层.then(value => console.log(value)); // 输出1

（3）Async/Await优化嵌套

// 优化前
fetchData().then(res => process(res)).then(...);// 优化后
async function handleData() {const res = await fetchData();const processed = await process(res);return processed;
}

（4）对象扁平化

const flatten = obj => Object.entries(obj).flatMap(([k, v]) => typeof v === 'object' ? flatten(v).map(([subK, val]) => [`${k}.${subK}`, val]) : [[k, v]]);

（5）手写Promise.all

Promise.all = function(promises) {return new Promise((resolve, reject) => {let count = 0;const results = [];promises.forEach((p, i) => {Promise.resolve(p).then(res => {results[i] = res;if (++count === promises.length) resolve(results);}, reject); // 任一失败立即reject});});
};

4. 八股环节

（1）useState同步/异步？

批处理更新：React 18默认自动批处理，异步更新状态（避免频繁渲染）。
同步场景：在setTimeout或原生事件中，setState同步执行（脱离React调度机制）。

（2）Hooks条件/循环限制

禁止条件语句包裹：Hooks调用顺序依赖Fiber链表结构，条件破坏顺序会导致状态错位（React依赖调用顺序标识Hook）。
循环问题：循环中调用Hook会破坏调用次数一致性（需确保每次渲染Hook数量不变）。

（3）Webpack热更新速度差异

第二次更快：首次构建需完整编译，热更新（HMR）仅增量更新修改的模块，通过内存缓存未修改的chunk。
缓存机制：module.hot.accept监听依赖变更，复用缓存模块。

（4）Module/Chunk/Bundle区别

概念	说明
Module	源码文件（如JS/CSS模块），Webpack以依赖图组织。
Chunk	编译中间产物，由入口文件或动态导入（`import()`）分割的代码块。
Bundle	最终输出的文件（一个或多个Chunk合并生成），如`main.js`。