「React实战面试题」useEffect依赖数组的常见陷阱
你正在开发一个用户管理系统，需要根据用户ID获取用户详情。产品经理要求页面加载时自动获取数据，同时当用户ID变化时也要重新获取。
作为一名有经验的React开发者，你很自然地想到了使用useEffect来处理这个需求。
代码实现
你写出了以下代码：
function UserProfile({ userId }) {
const [profile, setProfile] = useState(null);
const [loading, setLoading] = useState(false);const fetchUserProfile = () => {setLoading(true);// 模拟API调用，实际项目中可能会有更复杂的逻辑fetch(`/api/users/${userId}`).then(response => response.json()).then(data => {setProfile(data);setLoading(false);}).catch(error => {console.error('获取用户信息失败:', error);setLoading(false);});};useEffect(() => {fetchUserProfile();}, [userId, fetchUserProfile]);if (loading) return<div>加载中...</div>;
if (!profile) return<div>暂无用户信息</div>;return (<div><h2>{profile.name}</h2><p>邮箱: {profile.email}</p><p>部门: {profile.department}</p></div>);
}🚨 问题出现
测试时你发现了一个奇怪的现象：
网络请求不断发送 - 打开开发者工具，发现同一个API被疯狂调用
Loading状态闪烁 - 页面的"加载中"提示不停地闪烁
性能问题 - 页面变得卡顿，用户体验很差
你仔细检查了代码：
userId确实是从props传入的，值没有变化ESLint的
exhaustive-deps规则检查通过代码逻辑看起来完全正确
🔍 问题分析
让我们一起来思考一下可能的原因：
思考点1：依赖数组的比较机制
React是如何判断依赖数组中的值是否发生了变化？它使用什么样的比较方式？
思考点2：函数的特性
在JavaScript中，每次组件重新渲染时，组件内部定义的函数会发生什么？
思考点3：useEffect的执行时机
当依赖数组中有任何一项发生变化时，useEffect会如何响应？
💭 深入思考
让我们通过一个简化的例子来理解：
// 第一次渲染
function Component_Render1() {
const func1 = () =>console.log('hello');
// func1 的引用地址：0x001
}// 第二次渲染（即使什么都没变）
function Component_Render2() {
const func2 = () =>console.log('hello');
// func2 的引用地址：0x002
}// 问题：func1 === func2 的结果是什么？🎯 面试题：选择你的答案
基于以上分析，你认为问题的根本原因是什么？应该如何解决？
请从以下选项中选择你认为正确的答案（可多选）：
选项A
useEffect重复执行是因为函数是对象，fetchUserProfile在每次渲染时都是新的引用，导致依赖数组检测到变化。
选项B
问题出在依赖数组不应该包含userId，移除它就能解决无限循环的问题。
选项C
需要使用useCallback来缓存fetchUserProfile函数，确保它的引用在渲染间保持稳定。
选项D
应该将fetchUserProfile函数移到组件外部，这样就不会在每次渲染时重新创建。
🤝 互动环节
在评论区写下你的选择和理由：
你的答案是：A、B、C、D 中的哪一个（或组合）？
你的理由是：为什么你认为这个选择是正确的？
实际经验：你在项目中是否遇到过类似的问题？是如何解决的？
💡 思考提示
在给出答案之前，可以考虑以下几个方面：
JavaScript基础：函数在内存中是如何存储的？
React原理：useEffect是如何进行依赖比较的？
实际应用：在真实项目中，哪种解决方案更实用？
性能考虑：不同方案对性能有什么影响？
🔄 扩展思考
如果你已经有了初步答案，不妨再思考几个相关问题：
如果
fetchUserProfile需要访问多个props或state，应该如何处理？在什么情况下直接将函数写在useEffect内部会更好？
自定义Hook能否解决这类问题？
📝 小结
这是一个在React开发中非常常见的场景，很多开发者都曾经遇到过类似的困惑。理解这个问题的本质，不仅能帮你避免bug，还能让你对React的渲染机制有更深入的理解。
期待在评论区看到你的思考和答案！下一期我们将详细解析每个选项，并分享最佳实践方案。
💡 提示：这类问题在面试中出现频率很高，不妨把它加入你的面试准备清单。