「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>
  );
}

🚨 问题出现

测试时你发现了一个奇怪的现象：

1. 网络请求不断发送 - 打开开发者工具，发现同一个API被疯狂调用
2. Loading状态闪烁 - 页面的"加载中"提示不停地闪烁
3. 性能问题 - 页面变得卡顿，用户体验很差

你仔细检查了代码：

• 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函数移到组件外部，这样就不会在每次渲染时重新创建。

🤝 互动环节

在评论区写下你的选择和理由：

1. 你的答案是：A、B、C、D 中的哪一个（或组合）？
2. 你的理由是：为什么你认为这个选择是正确的？
3. 实际经验：你在项目中是否遇到过类似的问题？是如何解决的？

💡 思考提示

在给出答案之前，可以考虑以下几个方面：

• JavaScript基础：函数在内存中是如何存储的？
• React原理：useEffect是如何进行依赖比较的？
• 实际应用：在真实项目中，哪种解决方案更实用？
• 性能考虑：不同方案对性能有什么影响？

🔄 扩展思考

如果你已经有了初步答案，不妨再思考几个相关问题：

1. 如果fetchUserProfile需要访问多个props或state，应该如何处理？
2. 在什么情况下直接将函数写在useEffect内部会更好？
3. 自定义Hook能否解决这类问题？

📝 小结

这是一个在React开发中非常常见的场景，很多开发者都曾经遇到过类似的困惑。理解这个问题的本质，不仅能帮你避免bug，还能让你对React的渲染机制有更深入的理解。

期待在评论区看到你的思考和答案！下一期我们将详细解析每个选项，并分享最佳实践方案。

💡 提示：这类问题在面试中出现频率很高，不妨把它加入你的面试准备清单。