牛客春招前端面经整理：字节一面（React / RN / SSR / Token / SW）（三十一）

收录日期：2026-05-07
关键词：前端、React、React Native、小程序、虚拟 DOM、Diff、SSR、登录鉴权、Token、Service Worker、AI 提效、Webpack、pnpm

1. RN 和原生开发的区别？分别适合什么场景？

参考答案

RN 用 JS/TS + 原生渲染（桥接/JSI 等）在多端复用 UI 与业务逻辑；原生用平台语言（iOS/Android）直接调用系统能力。
RN 优点：跨端复用、迭代快、生态丰富；缺点：性能/包体/原生能力接入成本、调试链路复杂。
原生优点：性能与体验更稳定、系统能力更强；缺点：双端成本高、交付节奏慢。
选型：重交互/高性能/强系统能力（相机、音视频、复杂动画）偏原生；多业务页/通用交互/跨端一致性偏 RN。

2. RN / 小程序和 WebView 混合开发的区别？各自优缺点是什么？

参考答案

WebView 混合：核心是“网页运行在 WebView 里”，通过 JSBridge 调原生能力；优点是成本低、复用 Web 生态；缺点是性能/体验上限受 WebView 限制。
RN：更接近“原生控件树 + JS 驱动”，理论上体验更接近原生，但工程复杂度更高。
小程序：运行在平台提供的运行时与渲染层（双线程/通信协议由平台定义），优点是分发与能力集成强，缺点是平台限制多、调试/兼容依赖平台实现。

3. `useState` 的底层实现原理（高层）是什么？

参考答案

React 用 Fiber 节点维护 hooks 链表（每个 hook 保存 memoizedState、更新队列等）。
setState 会创建 update 并入队，调度一次更新（优先级/并发特性由调度器决定）。
组件重新 render 时按 hooks 调用顺序依次“取出/计算”新 state；因此 hooks 必须保持稳定调用顺序。

4. React 修改 state 后页面一般怎么处理？（从更新到渲染）

参考答案

触发更新 → 进入调度（Scheduler）→ render 阶段生成新 Fiber 树（可中断）→ diff/比较 → commit 阶段把变更同步到 DOM（不可中断）。
可能发生批处理（batching）、跳过渲染（bailout）、或仅更新局部子树。

5. 什么是虚拟 DOM？Diff 算法如何比对更新？

参考答案

虚拟 DOM：用 JS 对象描述 UI（元素类型、props、children），便于跨平台渲染与变更计算。
Diff 核心：同层比较（不同类型直接替换）、key 帮助列表稳定复用、尽量复用旧节点减少真实 DOM 操作。
列表更新：按 key 识别增删改移；无 key 或不稳定 key 会导致复用错误与额外重排。

6. Vue3 的 Composition API 与 React Hooks 的关系？有哪些相似与差异？

参考答案

相似：都强调逻辑复用与组合，把业务逻辑从组件选项中抽离成可复用函数。
差异：
- Vue 的响应式基于 reactive/ref（依赖收集 + 触发），组合函数可在任意地方创建响应式状态；
- React 的 Hooks 状态更新依赖重新 render，数据流以 props/state 驱动。
迁移注意：Vue 的副作用与依赖更“自动”，React 更依赖显式依赖数组与不可变更新习惯。

7. SSR 是什么？在 Vue/React 中怎么使用？

参考答案

SSR：服务端先把页面渲染成 HTML 返回，客户端再 hydration（接管事件与状态）。
优点：首屏更快、SEO 更友好；缺点：服务端成本更高、同构约束（不能随意用浏览器 API）、hydration 复杂与一致性要求高。
React 常见：Next.js / Remix；Vue 常见：Nuxt；都需处理数据预取、路由匹配、同构状态注水与脱水。

8. 简述前端登录流程与 Token 机制

参考答案

登录：提交凭证（账号/验证码/OAuth）→ 服务端校验 → 返回 token（通常 access token + refresh token）→ 客户端存储并在后续请求携带（Authorization header / cookie）。
access token：短期有效；refresh token：用于换新，风险更高，通常更严格存储与校验。
退出：服务端撤销 refresh token（或加入黑名单）+ 客户端清除本地状态。

9. Token 里存用户信息每次查库性能差，怎么优化？

参考答案

方案 1：JWT 直接携带必要的用户声明（claims），减少查库；缺点是撤销困难、敏感信息不宜放入、体积更大。
方案 2：缓存用户会话（Redis）并用 sessionId/token 索引；优点可控撤销与更新，缺点是引入状态与缓存一致性问题。
常见折中：access token 用 JWT（短期）+ refresh token 状态化管理（可撤销）。

10. 如何防止攻击者伪造 Token？

参考答案

核心：Token 必须由服务端签名（HMAC/RS256 等），客户端不可伪造有效签名。
校验：签名、过期时间（exp）、发行方（iss）、受众（aud）、nonce/jti（防重放）等。
防泄露：全程 HTTPS；token 不落地或只放安全容器；尽量用 HttpOnly/SameSite cookie；配合设备指纹/绑定会话与风控。

11. Service Worker 的作用是什么？常见应用场景？

参考答案

运行在浏览器后台的脚本代理，可拦截网络请求（fetch），实现离线缓存与资源更新策略。
场景：PWA 离线可用、静态资源缓存、请求兜底、预缓存、消息推送（Push）、后台同步（Background Sync）。
关键：缓存更新策略（stale-while-revalidate / cache-first / network-first）与版本管理（activate 清理旧缓存）。

12. Webpack 做了什么？Loader / Plugin 的区别？

参考答案

Webpack：从入口构建模块依赖图，把各类模块（JS/CSS/图片等）打包成可部署的 bundles/chunks。
Loader：把“非 JS”或“需要转译的资源”转换成模块（如 Babel/TS、CSS、SVG）。
Plugin：介入构建生命周期做更广泛的事情（产物优化、注入变量、拆包、生成 HTML、压缩、分析等）。

13. `npm` / `yarn` / `pnpm` 的差异？pnpm 如何处理包版本冲突？

参考答案

npm/yarn classic 更偏“扁平 hoist”，容易出现幽灵依赖；pnpm 默认非扁平（更严格）。
pnpm 用内容寻址 store + 链接结构，允许同一依赖在不同子树安装不同版本，减少覆盖冲突。
需要强制对齐时用 pnpm.overrides（或 workspace 约束）统一关键依赖版本。

14. 手撕：实现 `Function.prototype.bind`（支持柯里化、改变 this）

参考答案

基本点：
- 返回一个新函数，内部用 apply/call 绑定 this，并合并参数（预置参数 + 调用时参数）。
- 处理 new：当绑定函数被 new 调用时，this 应该指向新实例而不是绑定对象。
- 原型链：保持 boundFn.prototype 让 instanceof 行为合理（可用中间函数桥接）。

15. 爬楼梯问题（动态规划）思路？

参考答案

经典 DP：dp[i] = dp[i-1] + dp[i-2]，dp[0]=1, dp[1]=1（或按题意定义）。
可用滚动变量把空间从 O(n) 优化到 O(1)。