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

Question

我打算排除这一点，但只是想仔细检查是否没有更好的方法来做到这一点。

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

因此我计划禁用此行的详尽依赖。

这明智吗？

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

Answer 1

没有。您有几种首选的解决方案，可以忽略该规则。

您可以提供一个引用稳定值。我有时喜欢使用 useGetter 类型的钩子(Hook):

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 这样仅引用先前值的钩子(Hook)对于检查 previousAppStateVisible !== undefined && appStateVisible !== previousAppStateVisible 值自上次渲染以来是否发生变化非常有用。如果没有的话，你可以早点回来。 (https://usehooks.com/usePrevious/)