排除这个 useEffect 依赖数组变量是不是明智？ lint 推荐 3，但我只想依赖 1

Posted 2023-03-17

【中文标题】排除这个 useEffect 依赖数组变量是不是明智？ lint 推荐 3，但我只想依赖 1

【英文标题】：Wise to exclude this useEffect dependency array variable? lint recommends 3, but i only want to depend on 1排除这个 useEffect 依赖数组变量是否明智？ lint 推荐 3，但我只想依赖 1

【发布时间】：2021-11-18 16:59:02

【问题描述】：

我打算排除这个，但只是想再次确认没有更好的方法可以做到这一点。

此逻辑检测到用户已将应用移至后台（通过 appstatevisible），然后将一堆数据（视图）发送到服务器。 eslint 建议将视图、用户、cancelToken 包含到依赖数组中，但这没有意义，因为我只想根据 appStateVisible 发送它。我不想在每次用户或视图更新时触发它。

因此，我计划为此行禁用详尽的deps。

这样做明智吗？

useEffect(() => 
    async function handleViews() 
      await sendViews(views, user, cancelToken);
      ... do more
    
    if (
      appStateVisible.match('inactive') ||
      appStateVisible.match('background')
    ) 
      handleViews();
    
  , [appStateVisible]);

【参考方案1】：

没有。您有几个解决方案更倾向于忽略规则。

您可以提供一个参考稳定的值。我有时喜欢使用useGetter 之类的钩子：

const useGetter = <S>(value: S): (() => S) => 
  const ref = useRef(value);
  useLayoutEffect(() => 
    ref.current = value;
  );
  return useCallback(() => ref.current, [ref]);
;

它允许您编写如下内容：

const getViewData = useGetter( user, cancelToken )

useEffect(() => 
    async function handleViews() 
      const  user, cancelToken  = getViewData()
      const user = await sendViews(views, user, cancelToken);
      ... do more
    
    if (
      appStateVisible.match('inactive') ||
      appStateVisible.match('background')
    ) 
      handleViews();
    
, [appStateVisible, getViewData]);

因为getViewData不改变，所以除了应用状态改变之外，不会因为任何其他原因触发useEffect。并且返回值不会过时。

作为替代方案，您可以正常提供所有依赖项，但这次请检查 appStateVisible 是否已更改。像 usePrevious 这样只引用前一个值的钩子对于检查 previousAppStateVisible !== undefined && appStateVisible !== previousAppStateVisible 的值是否从上次渲染发生变化很有用。如果没有，您可以提前返回。 (https://usehooks.com/usePrevious/)

【讨论】：

哦，谢谢！在 useGetter 中添加 useCallback 有什么价值吗？

是的，useCallback 是为了确保返回的 getter 函数永远不会改变。但是，虽然该函数永远不会改变，但它在调用时返回的值将始终是最新的。