React.js 面试题

Mon, 01 Jan 0001 00:00:00 +0000

共 148 道 React.js 面试题。答案默认折叠，便于先自行作答。

1. 说说 Hooks 的依赖数组原理

难度：3 · 类型：QA

题目要点

Hooks 的依赖数组本质是一次浅层引用比较机制。React 在 commit 阶段通过 Object.is 逐项比较新旧依赖数组，决定是否重新执行 effect，并在变化时先执行 cleanup。依赖数组不会监听变量变化，也不负责触发 render，只用于声明副作用与状态之间的关系。依赖缺失会导致闭包捕获旧值，依赖不稳定会导致 effect 频繁执行，因此依赖必须完整且保持引用稳定。

参考答案

这个问题的核心，不是“依赖数组怎么写”，而是：React 是如何判断副作用是否需要重新执行的。

依赖数组的存在，本质是为了让 React 在两次 render 之间进行一次“浅层比较（shallow compare）”，从而决定是否跳过本次 effect 的执行。

一、从 useEffect 的执行时机说起

useEffect(() => {
 // effect
}, [a, b]);

React 在每次 render 结束后，会把 effect 收集到 Fiber 节点的 effect 链表中。

当进入 commit 阶段时，React 会：

取出当前 Fiber 上一次保存的依赖数组
与本次 render 生成的新依赖数组进行比较
决定是否标记该 effect 需要执行

如果依赖变化，则：

React.js on Last Stand

React.js 面试题

1. 说说 Hooks 的依赖数组原理

题目要点

一、从 useEffect 的执行时机说起