滴滴二面准备（一）

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

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指向问题

javascript 复制代码

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

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

（2）Promise透传陷阱

javascript 复制代码

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

（3）Async/Await优化嵌套

javascript 复制代码

// 优化前
fetchData().then(res => process(res)).then(...);

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

（4）对象扁平化

javascript 复制代码

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

javascript 复制代码

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`。

回答策略建议

突出简历亮点：性能优化（得物项目65%提升）、可视化（WebGL/ECharts）、工程化（Monorepo/Turborepo）。
结合项目答八股 ：如答Promise.all时关联得物"统一任务调度函数"的异构调用经验；答Hooks限制时关联React Fiber理解。
量化成果：奖项（ICA/超图）、性能指标、落地效果（如AI平台创作效率提升）。

面试官更关注"如何用技术解决业务问题"，回答时紧扣"问题→方案→结果"逻辑，展现工程化思维。