2026面试题汇总

SunnyY
6 阅读5分钟

一面口述版

  1. React 的核心设计理念 核心是声明式编程和组件化。声明式让我们只描述 UI 状态，React 自动更新 DOM；组件化把页面拆成可复用的独立单元，方便维护和复用。另外，单向数据流和虚拟 DOM 也是关键，前者让状态变化可预测，后者提升了渲染性能。

  2. JSX 的本质是什么，为什么浏览器无法直接解析 JSX JSX 本质上是 React.createElement 的语法糖，浏览器不认识它，需要通过 Babel 等工具编译成标准的 JavaScript 对象。它让我们可以在 JS 里写类似 HTML 的结构，代码更直观。

  3. React 18 的最新版本特性 主要是并发渲染，让渲染可中断，提升页面响应；还有自动批处理，在所有场景下（包括异步回调）都能合并多次状态更新，减少重渲染；另外，useId、useTransition 等新 API 也让并发特性更好用。

  4. 调用 setState 后发生了什么？解释其异步批处理机制 调用 setState 后，React 会把更新放入队列，不会立即更新，而是在合适的时机（如事件循环结束）批量处理，生成新的虚拟 DOM，再对比旧的，最后更新真实 DOM。异步批处理是为了避免频繁重渲染，提升性能。

  5. for in 和 forEach for...in 遍历对象的可枚举属性，包括原型上的，不适合遍历数组；forEach 是数组方法，遍历数组元素，不能中断，也不返回新数组。

  6. map, filter, reduce 区别

◦ map：遍历数组，返回一个新数组，每个元素是回调的返回值。

◦ filter：遍历数组，返回一个新数组，包含所有通过测试的元素。

◦ reduce：遍历数组，将结果累积为一个值（可以是对象、数组等），常用于求和、分组、统计等场景。

  1. 为什么选择 AntV，没有选择 ECharts AntV 是蚂蚁集团的可视化体系，和我们的技术栈（如 Ant Design）更契合，组件风格统一；它的 G2/G6 更灵活，适合做定制化图表和关系图；ECharts 功能全，但在复杂交互和自定义能力上稍弱。

  2. useRef 哪些场景

◦ 保存 DOM 节点或组件实例，直接操作 DOM。

◦ 保存定时器、订阅 ID 等，在组件卸载时清理。

◦ 保存可变值（如计数器），修改它不会触发重渲染。

  1. Webpack JS 文件太大，怎么拆开

◦ 用 splitChunks 把公共依赖（如 React、lodash）拆成单独的 chunk。

◦ 路由级代码分割，用 import() 动态导入，实现按需加载。

◦ 移除未使用的代码，开启 Tree Shaking。 二面口述版

  1. 小程序怎么减少包的体积，小程序和 H5 有什么区别

◦ 减包体积：压缩图片、用分包加载、移除未使用的代码和资源、避免引入大的第三方库。

◦ 区别：小程序运行在微信等宿主环境，有原生能力和限制；H5 运行在浏览器，兼容性更广，但能力受限于 Web 标准。

  1. 有没有写过 plugin 写过 Webpack 插件，比如自定义资源处理、注入环境变量、生成构建报告等。核心是利用 Webpack 的钩子机制，在编译的不同阶段执行自定义逻辑。

  2. 防抖和节流，手写 hook 防抖

◦ 防抖：事件触发后，延迟一段时间再执行，如果期间再次触发，就重新计时（如搜索框输入）。

◦ 节流：事件触发后，在一段时间内只执行一次（如滚动、resize）。

◦ 手写防抖 Hook：用 useRef 保存定时器，在 useEffect 里清理，返回一个防抖后的函数。

  1. CDN 用自己搭的服务吗，CDN 为什么比普通的资源快 一般用第三方 CDN（如阿里云、腾讯云），自己搭成本高、维护复杂。CDN 把资源缓存到全球节点，用户访问时从最近的节点获取，减少了网络延迟和源站压力。

  2. 为什么决定采用微前端 主要是为了解耦大型应用，不同团队可以独立开发、部署和升级；可以渐进式迁移旧项目，不用一次性重构；技术栈无关，能整合不同框架的应用。

  3. 浏览器缓存策略，强缓存和协商缓存哪个优先级高，你们怎么配置这个缓存 强缓存优先级更高，直接从本地缓存读取，不发请求；协商缓存需要发请求和服务器验证。配置上，静态资源（如 JS、CSS、图片）用强缓存（Cache-Control: max-age），HTML 用协商缓存（ETag/Last-Modified）。

  4. splitChunk 怎么配置，sourcemap 是干什么的

◦ splitChunks 配置：设置 chunks: 'all'，cacheGroups 里把 vendors（第三方库）和 commons（公共代码）拆成单独 chunk。

◦ sourcemap：把压缩后的代码映射回源码，方便线上调试和定位问题。

  1. Taro 怎么实现小程序和 H5 多端统一的 Taro 用一套代码，通过编译时和运行时的适配，把 React 代码转换成不同端的代码。编译时把 JSX 转成各端的模板，运行时提供统一的 API 和组件，抹平差异。 要不要我帮你把这些回答再压缩成15秒一句话版，方便你快速记忆？
avatar
文章
阅读
粉丝