面试

面试准备：PDD前端Web开发

Posted by yZhang on May 19, 2025

1.前端八股

1.1 react的hooks用过哪些？

React hooks是react16.8 以后，react新增的钩子API，目的是增加代码的可复用性，逻辑性，弥补无状态组件没有生命周期，没有数据管理状态state的缺陷。 解决逻辑复用难的问题；放弃面向对象编程，转向函数式编程。

常见hooks：

  • useState: 状态钩子，可以用来管理组件内部的状态，可以获取和设置组件的状态。
1

const [count, setCount] = useState(0);
  • useEffect: 副作用钩子，可以用来处理组件的副作用，比如请求数据，设置定时器，订阅事件等。
1
2
3
4
5
6
7
8

useEffect(() => {
  const timer = setTimeout(() => {
    setCount(count + 1);
  }, 1000);
  return () => {
    clearTimeout(timer);
  };
}, [count]);
  • useLayoutEffect: 布局钩子，可以用来处理组件的布局，比如改变浏览器大小，滚动条位置等。
1
2
3

useLayoutEffect(() => {
  document.title = `You clicked ${count} times`;
});
  • useContext: 上下文钩子，可以用来共享组件的状态，比如跨组件通信。
1

const value = useContext(MyContext);
  • useReducer: 自定义的状态钩子，可以用来管理复杂的状态，比如表单的验证。
1

const [state, dispatch] = useReducer(reducer, initialState);
  • useCallback: 回调钩子，可以用来缓存函数，避免重复渲染。
1
2
3
4
5
6

const memoizedCallback = useCallback(
  () => {
    doSomething(a, b);
  },
  [a, b],
);
  • useMemo: 缓存钩子，可以用来缓存计算结果，避免重复计算。
1

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

1.2 Web实时音视频前端技术

1.2.1 讲解框架（STAR模型）

  • Situation（背景）
    • 项目目标：实现Web端实时音视频会议的核心交互功能
    • 技术挑战：无WebSocket情况下通过HTTP轮询模拟实时状态同步
  • Task（任务）
    • 前端核心模块开发
    • 核心需求：登录验证、用户状态管理、邀请/接受机制
  • Action（行动）
    • 架构设计：原子状态管理方案选型原因（轻量级、精准更新）
    • 功能实现：
      • 登录流程：login API → 更新isLoggedInAtom → 切换界面
      • 邀请系统：双端轮询机制设计（邀请方轮询在线状态，被邀请方轮询邀请）
  • Result（结果）
    • 功能实现：完成基础会议交互流程
    • 扩展性：原子状态易于扩展新功能（如新增用户权限状态）
    • 可维护性：TS类型系统减少运行时错误

1.2.2 面试问答

1.为什么选择原子状态管理（如Recoil/Jotai）而不是Redux？

项目规模：当前功能较简单，原子状态足够满足分散式状态管理需求
性能优势：避免Redux的全量更新，精准更新关联组件
开发体验：更简洁的API，减少模板代码（无Action/Reducer）

2.HTTP轮询的缺点是什么？如何优化？

缺点：

  • 高延迟：最大延迟=轮询间隔（5s）
  • 资源浪费：无状态变化时仍发送请求

优化方案：

  • 动态调整轮询间隔（如空闲时延长间隔）
  • 服务端支持长轮询（Hanging GET）
  • 最终替换为WebSocket（可提及后续优化方向）

3.登录信息（如userId）如何安全存储？

方案：使用JWT（JSON Web Token）加密存储，并在每次请求时携带。

4.get请求和post请求的区别？

使用场景上：

  • get请求：获取资源；需要从服务器获取数据但不改变任何资源状态的操作一般使用get请求。
  • post请求：用于创建新资源或者提交数据进行处理；需要想服务器提交数据，可能导致服务器上资源状态改变的操作一般使用post请求。

大小限制上：

  • get请求的数据长度受到URL长度的限制（因为数据附在URL后面）；
  • post请求的数据量基本没有限制，可以发送大量数据；

安全性上：

  • GET请求的数据是通过URL传输的，这意味着所有的请求数据都会在浏览器的历史记录、服务器的日志、网络设备的日志中留下记录，这在某些情况下可能会泄露敏感信息。
  • 而POST请求的数据是放在请求体中的，不会在URL中显示，相对来说更加安全。 但是，无论是GET还是POST，如果不使用HTTPS进行加密，数据传输过程中都有可能被第三方截获。

幂等性上：

  • 幂等性：无论一个操作进行一次或多次，结果都是相同的。
  • GET是幂等的，多次发送相同的GET请求，每次得到的结果都是相同的。
  • 对于POST请求，发送相同的请求可能会有不同的结果，例如，每次发送一个POST请求来创建新的资源，都可能导致新资源的创建。

缓存上：

  • GET请求的响应结果可以被浏览器缓存；
  • POST请求的响应结果一般不被缓存；

总结：

patch：部分更新已存在的资源 (仅修改指定字段)。会修改服务器状态，非幂等。

方法 用途 幂等性 安全性 请求体 典型场景
GET 获取资源 ✅ ✅ ❌ 查询数据、获取详情
POST 创建资源 ❌ ❌ ✅ 提交表单、创建用户
PATCH 部分更新资源 ❌ ❌ ✅ 修改用户邮箱、更新配置

5.如何保证频繁API请求的性能？

  • 请求合并：将多个关联的API请求合并为单个请求，减少HTTP连接开销。需服务端提供聚合接口，客户端统一管理数据获取；
  • 缓存：使用缓存机制减少请求次数，提升响应速度。
  • 防抖/节流；取消机制等。

6.什么是路由？

核心作用
路由的主要功能是将用户的请求（URL 地址）映射到特定的功能或页面，实现用户对不同页面的访问或操作触发。
具体包括：

(1) 导航管理：
路由允许用户通过 URL 访问不同的页面或功能模块，支持静态路径和动态参数路径：

  • 静态路径示例：
    • /home：访问首页。
    • /user/profile：访问用户个人资料页面。
  • 动态参数路径（:参数名 表示可变部分）：
    • /room/:id：访问特定房间的页面（:id 为动态参数，可替换为具体房间 ID）。

(2)状态管理：
路由可通过参数（查询参数或路径参数）传递状态信息：

  • 查询参数示例（以 ? 开头，多个参数用 & 分隔）：
    • /search?Query=webRTC：搜索与 webRTC 相关的内容（Query=webRTC 为查询参数）。

(3)单页应用（SPA）支持：
在单页应用（SPA）中，路由用于模拟多页面效果，避免整页重新加载：

  • 通过前端框架（如 React Router、Vue Router）实现页面切换和状态管理。
  • 典型场景：点击页面内的链接时，路由更新 URL 并渲染对应组件，保持页面整体框架不变。
CATALOG
    FEATURED TAGS
    面试 常识 项目
    FRIENDS