React hooks 警告我缺少依赖项

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。
这种行为背后的原因是什么？
这让我在使用 hooks 时感到不安全，好像我做错了什么。

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 引用。 “ref”对象是一个通用容器，其当前属性是可变的并且可以保存任何值，类似于类上的实例属性。 more

Answer 3

我同意你的观点，useRef 是一种增加不必要复杂性的 hacky 解决方案。老实说，我发现的最佳解决方案是在 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 仍然相当新，因此仍然存在相互竞争的最佳实践。我不会推荐 useRef 。