javascript - useEffect 在自定义钩子(Hook)中使用 ref 缺少依赖项警告

Question

在启用了穷举规则的 React Typescript 中，当我定义一个 ref 并在效果内使用它时，linter 就可以了:

const stringRef: RefObject<string> = useRef("Hello World!");
  
useEffect(() => {
  console.log(stringRef.current);
}, []) // no warning, the linter detects that I'm using a ref

但是，当我将效果放在自定义钩子(Hook)中时，linter 提示我应该将 ref 包含在依赖数组中:

const stringRef: RefObject<string> = useRef("Hello World!");
  
useCustomHook(stringRef);

// in another-file.ts
const useCustomHook = (ref: RefObject<string>) => {
  useEffect(() => {
    console.log(ref.current);
  }, []) // ESLint: React Hook useEffect has a missing dependency: 'ref'. Either include it or remove the dependency array.(react-hooks/exhaustive-deps)
}

从语义上讲，没有任何改变，但是，linter 不承认 ref 是一个 RefObject (即使我是这样输入的)。
现在最大的问题是: 如何让 linter 知道给定的依赖项不需要包含在依赖项数组中而不抑制警告？
对我来说，这是不可能的一个主要缺点，因为我无法在没有 linter 提示的情况下将我的效果转换为自定义钩子(Hook)。
谢谢你的帮助。

Answer 1

您不能开箱即用地对其进行配置。
linter (eslint) 是一个静态代码分析器。它只分析文本模式而不编译代码，即它不知道所写内容的“含义”。
例如，它看到“use***()”模式并认为它是一个自定义钩子(Hook)，然后它使用钩子(Hook)规则模式验证它，比如在 if 中没有这样的文本陈述。
你自己看:

Reminder: Custom hook is a function with 'use' prefix and a function which uses hooks.

// NOT A CUSTOM HOOK, just a function with 'use' prefix
const useConsole = () => console.log("hello");

// Normal function
const logHello = () => console.log("hello2");

const Component = () => {
  if (true) {
    // Warning - React hook is called conditionally
    useConsole();

    // OK
    logHello();
  }
  return <>Example</>;
};

但是，你总是可以 propose a custom rule识别 RefObject<string>和 useEffect在同一范围内。
在 Typescript 编译器方面，它没有违反任何内容，因为用例与 useEffect 匹配。类型。