是否可以安全地忽略React钩子上缺少的依赖项es-lint警告？

编程问答 2022-06-21

问题描述

我有一个组件，在卸载时需要调用一个函数。此函数作为组件的prop传递。据我所知，要在卸载组件时调用函数，您只需要一个useEffect并带有一个空的依赖项数组即可：

useEffect(() => {
    return () => { prop.onUnmount() }

},[]);

这可以按预期工作，但是ESLint抱怨缺少对钩子的依赖：

第156：6行：React Hook useEffect缺少依赖项：'props.onUnmount'。要么包含它们，要么删除依赖项数组react-hooks / exhaustive-deps

但是，这两种解决方案都不起作用

  • 如果删除依赖项数组，则将在每次重新渲染时执行该钩子
  • 如果添加依赖项，尽管prop.onUnmount()在任何重新渲染上都没有改变，并且该钩子不应该被触发，它仍将执行return部分。因此，该函数在卸载之前被调用。

那么，忽略警告是否安全，或者是否有任何执行该功能并阻止ESLint对其进行警告的工作？

解决方法

useEffect(() => {
    return () => { prop.onUnmount() }
},[]);

这将运行第一个渲染器上存在的prop.onUnmount函数。因此，如果该prop在组件的生命周期内发生更改，则您的代码将忽略该更改，这是lint规则警告您的内容。

如果要运行最后渲染器上存在的prop.onUnmount，则需要执行以下操作：

const cleanup = useRef();
// update the ref each render so if it changes the newest
//   one will be used during unmount
cleanup.current = prop.onUnmount;
useEffect(() => {
  return () => {
    cleanup.current();
  }
},[]);

如果您发现自己经常这样做，则可能需要将其提取到自定义钩子中，例如：

export const useUnmount = (fn) => {
  const fnRef = useRef();
  fnRef.current = fn;
  useEffect(() => {
    return () => {
      fnRef.current();
    }
  },[]);
};

// used like: 
useUnmount(props.onUnmount);
eslinteslintreact-hooksreactjsreactjsreactjsreactjs