使用 JSON.stringify() 或任何深度比较方法可能效率较低，如果您提前知道对象的形状，您可以编写自己的效果钩子来根据结果触发回调您的自定义相等函数。

useEffect 的工作原理是检查依赖项数组中的每个值是否与前一渲染中的值相同，如果其中一个不是，则执行回调。因此，我们只需要使用 useRef 保留我们感兴趣的数据实例，并且仅在自定义相等性检查返回 false 时分配一个新实例来触发效果。

function arrayEqual(a1: any[], a2: any[]) {
  if (a1.length !== a2.length) return false;
  for (let i = 0; i  void);

function useNumberArrayEffect(cb: () => MaybeCleanUpFn, deps: number[]) {
  const ref = useRef(deps);

  if (!arrayEqual(deps, ref.current)) {
    ref.current = deps;
  }

  useEffect(cb, [ref.current]);
}

用法

function Child({ arr }: { arr: number[] }) {
  useNumberArrayEffect(() => {
    console.log("run effect", JSON.stringify(arr));
  }, arr);

  return 
{JSON.stringify(arr)}
;
}

更进一步，我们还可以通过创建一个接受自定义相等函数的效果钩子来重用该钩子。

type MaybeCleanUpFn = void | (() => void);
type EqualityFn = (a: DependencyList, b: DependencyList) => boolean;

function useCustomEffect(
  cb: () => MaybeCleanUpFn,
  deps: DependencyList,
  equal?: EqualityFn
) {
  const ref = useRef(deps);

  if (!equal || !equal(deps, ref.current)) {
    ref.current = deps;
  }

  useEffect(cb, [ref.current]);
}

用法

useCustomEffect(
  () => {
    console.log("run custom effect", JSON.stringify(arr));
  },
  [arr],
  (a, b) => arrayEqual(a[0], b[0])
);

现场演示

您可以传递 JSON.stringify(outcomes) 作为依赖项列表：