React 钩子警告我缺少依赖项

Question

假设我正在使用useEffect在初始渲染时预取数据：

function myComponent(props) {
    const { fetchSomething } = props;
    ...
    ...
    useEffect(() => {
        fetchSomething();
    }, []);
    ...
    ...
}

我的 linter 警告我"React Hook useCallback 缺少依赖项"。它希望我将fetchSomething放在依赖项数组中。
问题是即使fetchSomething要更改，我也不希望组件重新获取数据。在我看来，useEffect 使用函数的大多数情况下，它并不真正关心函数是否被更改。
我不想关闭该警告，也不想在我的代码中传播// eslint-disable-next-line react-hooks/exhaustive-deps。
这种行为背后的理性是什么？
这让我在使用钩子时感到不安全，好像我做了什么不正确的事情。

Answer 1

您可以使用useRef或useMemo来存储值。

请参阅 https://stackoverflow.com/a/54963730/9351632

Answer 2

您可以使用

useRef钩子在首次渲染时记住props.fetchSomething的值。这将解决您的eslint问题

function myComponent(props) {
    const fetchSomethingRef = useRef(props.fetchSomething);
    useEffect(() => {
        fetchSomethingRef.current();
    }, []);
}

useRef(( Hook 不仅适用于 DOM refs。"ref"对象是一个通用容器，其当前属性是可变的，可以保存任何值，类似于类上的实例属性。

Answer 3

我同意你的看法，useRef 是一个黑客解决方案，增加了不必要的复杂性。老实说，我发现的最佳解决方案是在useEffect((中使用条件

function myComponent(props) {
    const { fetchSomething } = props;
    const [fetched, setFetched] = useState(false)
    ...
    ...
    useEffect(() => {
       if(!fetched) {
        fetchSomething();
        setFetched(true)
       }
    }, [fetched, fetchSomething]);
    ...
    ...
}

正确使用 useEffect 钩子是一个非常复杂的主题。你可以阅读这篇很长的文章

https://overreacted.io/a-complete-guide-to-useeffect/

useEffect仍然是相当新的，所以仍然存在竞争的最佳实践。我不建议使用Ref tho。