当 prop 改变时 React Custom Hook 运行过程

Question

我是 React 钩子的新手，正在尝试制作一个自定义钩子来连接数组并删除重复的对象。如果道具发生变化以避免不必要的处理，我只希望挂钩运行该过程。

我试图缓存连接的结果并useMemo仅在更改但不起作用时才运行。显然，我在useMemo工作方式上遗漏了一些东西。

我尝试了各种主要围绕细微调整的事情，例如将数组添加到useMemo依赖项而不是合并。任何帮助都会很棒。谢谢。

import * as React from "react";

let merged: any = [];

let result: any = [];

export const useRemoveDuplicateObjects = (arrays: any, value: string) => {

  merged = arrays.flat();

  const key = (item: any) => {

    return item[value];

  };

  const process = () => {

    result = [...new Map(merged.map((item: any) => [key(item), item])).values()];

  };

  React.useMemo(() => {

    if (merged.length) {

      process();

    }

  }, [merged]);

  return [result];

};

Answer 1

这里几乎没有什么事情做得不好。对于初学者来说，当你将数组作为第二个参数传递给 时useMemo，React 将比较它的值是否严格相等，即===. 每次比较都会失败，因为merged每次运行挂钩时都会重新分配变量。如果您想比较数组包含的先前值和新值，我可以想到两种方法：直接merged作为第二个参数传递而不是将其放入数组中，这样 React 将直接比较其中的值。我不确定这是否可行，因为值可能不会总是以相同的顺序排列。您可以在每次挂钩运行时存储数组的“旧”值（useState例如使用挂钩）并自己将这个旧值与新值进行比较，然后相应地设置一个布尔值。这样，这个布尔值可以作为数组中的第二个参数传递给您的useMemo.此外，正如文档所述，useMemo“返回一个昂贵的计算值”。因此，为了了解它的工作原理，您应该以这种方式获得“结果”值：  const result = React.useMemo(() => {     if (merged.length) {       return [...new Map(merged.map((item: any) => [key(item), item])).values()]     }     return []   }, merged); // will or won't work, I'd say go with the comparison yourself as stated before最后，如果您只想从钩子中返回一个值，则无需将其包装在数组中，您可以这样做：return result;