React Hooks - useDidUpdateEffect 与深度比较

Question

我有以下 useDidUpdateEffect 钩子

import { useRef, useEffect } from "react";

export default function useDidUpdateEffect(effect, deps) {
  const didMount = useRef(false);

  useEffect(() => {
    if (didMount.current) {
      effect();
    } else {
      didMount.current = true;
    }
  }, deps);
}

而我目前的使用方式如下：

useDidUpdateEffect(() => { ... }, [JSON.stringify(complexNestedObject)]);

问题在于，由于我的 dep 复杂而深入，有时会在没有必要的情况下执行回调。

我有一个useEffect的解决方案，就是useDeepEffect：

import { useRef, useEffect } from "react";
import { isEqual } from "lodash";

export default function useDeepEffect(effect, deps = undefined) {
  const isFirst = useRef(true);
  const prevDeps = useRef(deps);

  useEffect(() => {
    const isSame = prevDeps.current.every((obj, index) =>
      isEqual(obj, deps[index])
    );

    if (isFirst.current || !isSame) {
      effect();
    }

    isFirst.current = false;
    prevDeps.current = deps;
  }, deps);
}

但我想不出什么可以与 useDidUpdateEffect 进行深入比较，而不必创建另一个挂钩。

有什么想法吗？

=====================

更新：

由于这种情况，我处于当前情况。也许这可以做得更简单，但说实话，我已经尽力了（我不是超级专业）

1. 我有一个包含不同模块的文件夹“api”，其中包含连接到我的服务器的不同功能（我没有使用挂钩 这部分）

   services/
       firebase/
           api/
              users/
                 helpers/
                 cache/
                    usersCache.js
                 index.js
                 ...

如您所见，我有一个模块“usersCache.js”（记忆模式），它将避免一些 RTT 并降低成本。为了避免 RAM 出现问题，我在那里实现了一个缓存算法“LRU”。

1. 在我的应用程序中我没有使用 REDUX（可能是我采取的最糟糕的想法，但为时已晚，90% 的工作已经完成。将尝试学习 这项技术并在生产中采用它，并进行长时间的重构）。

为了管理复杂的状态，我使用了 React Context + useReducer，这在某种程度上简化了我的生活，因为它有点类似于 Redux。

就我而言，对于用户，我有 2 个上下文：

1. 当前用户上下文
2. 其他用户上下文

它们都包含获取的用户的敏感和非敏感数据。这里你可能会想：为什么要有usersCache？如果两个上下文都可以用作内存缓存？

答案（至少我认为）是：

1. 没有办法在 React 组件或钩子之外使用上下文。为了返回缓存的数据并避免发出服务器请求，它不可能在我的 api 模块中执行。

2. 我将敏感数据保存在依赖于当前用户会话的上下文中（例如 isFollowed）。因此，当用户注销时，上下文将被卸载（受保护的路由）。另一方面，我的 usersCache 模块仍然存在，没有敏感数据。

这是我的 CurrentUserContext 的示例（因为简单，我在这里没有使用减速器，但在我的 OtherUsersContext 中，因为状态管理很复杂，所以我这样做了）：

import React, { createContext } from "react";

import useDidUpdateEffect from "../../hooks/useDidUpdateEffect";
import useStateWithCallback from "../../hooks/useStateWithCallback";
import { usersCache } from "../../services/firebase/api/users";

const CurrentUserContext = createContext(null);

export default CurrentUserContext;

export function CurrentUserProvider({ children }) {
  const [data, setData] = useStateWithCallback(undefined);

  const updateData = (data, merge = true, callback = undefined) => {
    if (merge) {
      setData((prevData) => ({ ...prevData, ...data }), callback);
    } else {
      setData(data, callback);
    }
  };

  useDidUpdateEffect(() => {
    console.log(JSON.stringify(data, null, 2));
    /*
      As the current user data is not sensitive, we can
      synchronize the users cache here.
    */
    usersCache.updateCachedUser(data.id, data);
  }, [JSON.stringify(data)]); // TODO - Avoid unnecessary executions -> deepCompare ?

  return (
    <CurrentUserContext.Provider
      value={{
        data,
        setData,
        updateData,
      }}
    >
      {children}
    </CurrentUserContext.Provider>
  );
}

为了避免运行多个 useDidUpdateEffects，我正在对用户数据进行字符串化。但是，由于它是复杂且嵌套的：

 userData = {
     avatar: {
         uri,
         thumbnailUri, 
     },
     ...
 }

在数据没有变化时执行效果，因为接收到相同的数据是乱序的：

userData = {
     avatar: {
         thumbnailUri,
         uri, 
     },
     ...
 }

顶级字段不乱。

Answer 1

我认为（我可能是错的）如果你使用这个效果，整个问题就会消失：

useEffect(() => {
  if(!data) return;

  // do some stuff 
},[data]);

Answer 2

我遇到的问题是我的服务器正在重新调整带有无序字段的 JSON 数据...所以，您可以尝试当前的两种解决方案。

@Adam 的回答很好，避免使用自定义钩子。在其解决方案中，他只是用 JSON 对象生成一个哈希，并与前一个进行比较。如果哈希值相等，则不更新状态，避免运行 useEffect。

但是，这可能会让你在代码的不同部分编写一些条件并生成散列......所以，如果你不关心深入比较你的对象，你可以试试这个钩子：

import { useRef, useEffect } from "react";
import { isEqual } from "lodash";

export default function useDeepEffect(
  effect,
  deps = undefined,
  options = { ignoreFirstExecution: false }
) {
  const isFirst = useRef(true);
  const prevDeps = useRef(deps);

  useEffect(() => {
    if (!isFirst.current || !options.ignoreFirstExecution) {
      const isSame = prevDeps.current.every((obj, index) =>
        isEqual(obj, deps[index])
      );

      if (isFirst.current || !isSame) {
        effect();
      }
    }

    isFirst.current = false;
    prevDeps.current = deps;
  }, deps);
}

将选项 ignoreFirstExecution 设置为 true，您将获得与使用典型 useDidUpdateEffect 相同的行为。

  useDeepEffect(
    () => {
      usersCache.updateCachedUser(data.id, data);
    },
    [data],
    { ignoreFirstExecution: true }   
  );