动态非原始数据下React Hooks依赖数组的构建方法

1. JSON.stringify绝非最优选择 #

直接用JSON.stringify(data)作为useMemo依赖存在诸多硬伤：

• 无法序列化函数、Symbol类型，会直接忽略这些字段
• 对象键的顺序变化会导致字符串结果不同，但实际数据并未改变（比如{a:1,b:2}和{b:2,a:1}序列化结果不一致）
• 遇到循环引用会直接抛出错误
• 特殊值（undefined、NaN、Infinity）的序列化行为不一致，容易导致误判

2. 正确解决方案：深度比较+缓存控制 #

由于你无法预知props的结构，最可靠的方式是基于深度比较决定是否重新执行memo操作，而非依赖序列化字符串。可以通过自定义Hook实现：

自定义useDeepMemo Hook #

import { useRef, useMemo } from 'react';

// 简易版深度比较函数（也可以直接用lodash.isEqual替代）
function deepEqual(a, b) {
  if (a === b) return true;
  
  // 数组比较
  if (Array.isArray(a) && Array.isArray(b)) {
    if (a.length !== b.length) return false;
    for (let i = 0; i < a.length; i++) {
      if (!deepEqual(a[i], b[i])) return false;
    }
    return true;
  }
  
  // 对象比较（排除null和函数）
  if (typeof a === 'object' && a !== null && typeof b === 'object' && b !== null) {
    const keysA = Object.keys(a);
    const keysB = Object.keys(b);
    if (keysA.length !== keysB.length) return false;
    for (const key of keysA) {
      if (!keysB.includes(key) || !deepEqual(a[key], b[key])) return false;
    }
    return true;
  }
  
  // 其他类型直接值比较
  return Object.is(a, b);
}

function useDeepMemo(callback, dependencies) {
  const ref = useRef({
    dependencies: null,
    result: null
  });
  
  if (!deepEqual(dependencies, ref.current.dependencies)) {
    ref.current.dependencies = dependencies;
    ref.current.result = callback();
  }
  
  return ref.current.result;
}

在组件中使用 #

const data = { ...rest, internal1, internal2 };

useDeepMemo(() => {
  tx.current = createElement(RCtx.Provider, { v: data }, children);
}, [data]);

这个方案的核心是用useRef缓存上一次的依赖和计算结果，每次渲染时深度比较当前依赖与缓存的依赖，仅当实际内容变化时才重新执行回调，彻底规避了JSON.stringify的各种问题。

3. 函数类型props的处理 #

函数的比较是特殊场景：

• 如果用户传入的是稳定引用的函数（比如用useCallback包裹的函数），深度比较会直接识别引用一致，不会触发重执行，符合预期。
• 如果用户传入的是内联匿名函数（比如() => {}），每次渲染都会生成新的引用，此时即使函数逻辑完全一致，深度比较也会判定为变化。这种情况没有完美解决方案，因为函数内部的闭包变量无法被外部深度检测。

应对方式：

• 在组件文档中明确提示用户：若希望函数props不触发不必要的重执行，请用useCallback包裹后传入。
• 若必须兼容内联函数，可以尝试比较函数的toString()结果，但这只是权宜之计——如果函数内部依赖的变量变化但代码字符串不变，会导致误判（比如闭包变量更新但函数代码未改），不推荐作为通用方案。

内容的提问来源于stack exchange，提问作者Devildude4427