如何在 React 中正确地使用 useEffect 来监听对象或数组依赖项的变化，避免无限循环或无效更新？

如何在 React 中正确地使用 useEffect 来监听对象或数组依赖项的变化，避免无限循环或无效更新？

回答：
在 React 的 useEffect 中监听对象或数组时，由于每次渲染都会创建新的引用，即使内容相同，也会导致 useEffect 误判为“变化”，从而可能引发无限循环或不必要的副作用执行。正确做法包括：

1. 避免直接将对象/数组作为依赖项：如果依赖的是对象的某个具体属性，应直接依赖该属性。

   // ❌ 不推荐
   useEffect(() => {
     fetchData(userData);
   }, [userData]); // userData 是对象，每次渲染引用都不同
   
   // ✅ 推荐
   useEffect(() => {
     fetchData(userData.id);
   }, [userData.id]);
   

2. 使用 useMemo 缓存对象/数组：如果必须依赖整个对象或数组，可配合 useMemo 缓存其引用。

   const config = useMemo(() => ({ theme, language }), [theme, language]);
   
   useEffect(() => {
     applyConfig(config);
   }, [config]);
   

3. 自定义比较逻辑（如使用 useDeepCompareEffect）：对于复杂嵌套结构，可借助第三方库（如 use-deep-compare-effect）或自己实现深比较逻辑，但需谨慎使用以避免性能问题。

4. 确保 setState 不在副作用中无条件调用：若 useEffect 内部更新状态，需确保该状态变化不会无条件再次触发该 effect，否则会陷入无限循环。

解析：
React 的 useEffect 依赖项比较基于 Object.is（即浅比较），对于引用类型（对象、数组、函数），即使内容相同，只要引用不同就会触发 effect。因此关键在于保持依赖项引用的稳定性。最佳实践是只依赖必要的、可稳定比较的原始值，或通过 useMemo/useCallback 等工具稳定引用。这不仅避免了无限循环，也提升了性能。