标签题目
React相关面试题
为什么 useState 是数组结构的形式返回的,能不能以 Object 的形式返回?
这题考察 Hook API 设计和 React 状态匹配机制。useState 返回数组不是技术限制,而是固定二元返回值更方便调用方自由命名。
React.forwardRef 知道么?
这题考察 React ref 穿透和命令式能力封装。回答要说明 forwardRef 解决什么问题、如何转发、什么时候配合 useImperativeHandle 限制暴露面。
React Hooks 能用在 for 循环中么?为什么?条件语句呢?为什么?
这题考察 React Hooks 的调用顺序规则。Hooks 不能放在循环、条件和嵌套函数里,因为 React 依赖稳定调用顺序匹配内部状态槽位。
memo, useMemo, useCallback 分别是干什么的?
这题考察 React 记忆化优化边界。回答要区分组件跳过渲染、值缓存和函数引用稳定,并说明命中条件和成本。
我把所有的组件都用 memo 包起来有什么问题?
这题考察 React 过度优化判断。回答要说明 memo 的比较成本、命中条件、引用稳定性、依赖复杂度和 Profiler 驱动优化。
Vite 和 Next.js 都用过,你会做 SSR 吗?
这题考察 SSR 全链路理解。回答要说明服务端渲染、数据获取、HTML 注水、客户端 hydration、构建产物和 Next.js 与 Vite 的职责差异。
虚拟 DOM 和 diff 算法
这题考察虚拟 DOM 的抽象目的、diff 的启发式假设、key 的节点身份作用和最终 patch 到真实 DOM 的过程。不要把虚拟 DOM 说成一定比直接操作 DOM 快。
React/Vue 列表渲染中 key 的作用是什么?
key 的核心作用是在虚拟 DOM diff 或 reconciliation 过程中,为同一父节点下的一组子节点提供稳定身份标识。它帮助框架判断哪些节点是同一个、哪些需要移动、插入、删除或重新创建,从而减少错误复用和不必要的 DOM 操作,同时影响组件实例与内部 state 的保留或重置。
如果将列表的index设置为key会有什么问题?
把列表的 index 当作 key,最大问题不是性能差一点,而是把位置误当成了数据身份。当列表发生插入、删除、排序、过滤时,同一个 index 会指向不同数据,框架会错误复用组件实例和 DOM 节点,导致本地 state、输入值、动画状态、缓存结果和副作用都可能跟真实数据错位。
react18的事件系统相比于之前有什么变化?
React 18 的事件系统不是一次彻底重写,而是在 React 17 已经完成的 root 级事件委托基础上,进一步和自动批处理、事件优先级、并发渲染调度协同。回答时应先区分 17 和 18 的边界:委托位置从 document 迁移到 root 容器主要发生在 React 17,React 18 更重要的变化是让事件更新进入统一批处理模型,并根据事件优先级影响更新调度。
React Hooks 的设计约束和原理是什么?
React Hooks 的核心不是给函数组件加几个 API,而是把组件的状态、副作用和复用逻辑从 class 实例模型迁移到 render 快照模型。它解决了 class 中状态逻辑难复用、生命周期拆散同一业务逻辑、this 绑定和高阶组件嵌套等问题,但也引入了稳定调用顺序、依赖数组和闭包快照等严格约束。
Vue和React在创建组件的时候,说说最应该注意哪三点?
创建 Vue 和 React 组件时最应该注意三点:职责边界是否清晰、数据流与状态归属是否合理、副作用与性能边界是否可控。Vue 和 React 写法不同,但优秀组件都应该低耦合、可组合、可预测、易测试、易维护。