React Hooks：有什么原因可以解释为什么省略创建或分别为use效应和useCallback的回调是不好的吗？

Question

所以我在读丹·阿布拉莫夫和霍克斯博士的《使用效果完整指南》。

在文章中，Dan给出了以下示例：

function SearchResults() {
  const [query, setQuery] = useState('react');

  // ✅ Preserves identity until query changes
  const getFetchUrl = useCallback(() => {
    return 'https://hn.algolia.com/api/v1/search?query=' + query;
  }, [query]);  // ✅ Callback deps are OK

  useEffect(() => {
    const url = getFetchUrl();
    // ... Fetch data and do something ...
  }, [getFetchUrl]); // ✅ Effect deps are OK

  // ...
}

钩子文档给出了：

function ProductPage({ productId }) {
  // ✅ Wrap with useCallback to avoid change on every render
  const fetchProduct = useCallback(() => {
    // ... Does something with productId ...
  }, [productId]); // ✅ All useCallback dependencies are specified

  return <ProductDetails fetchProduct={fetchProduct} />;
}

function ProductDetails({ fetchProduct })
  useEffect(() => {
    fetchProduct();
  }, [fetchProduct]); // ✅ All useEffect dependencies are specified
  // ...
}

我想知道：回调和工厂函数真的有必要吗？

你也可以写：

const getFetchUrl = useCallback('https://hn.algolia.com/api/v1/search?query=' + query, [query]);

和

useEffect(fetchProduct, [fetchProduct]);

类似地，你可以想象一个场景，你可以把创建函数留给useMemo：

function Greeting({ name }) {
  const calculateExpensive = useCallback(() => {
    return `Hello ${name}`;
  }, [name]);

  const result = useMemo(calculateExpensive, [calculateExpensive]);
  return <p>{result}</p>;
}

我肯定我在这里犯了一个愚蠢的错误。我没有看到什么，做错了什么？

Answer 1

使用useCallback的原因是为了在需要时在呈现之间保持对函数的相同引用。

顾名思义，useCallback应该接受回调函数作为参数。因为useCallback（fn）是usemo（（）=

const getFetchUrl = useCallback('https://hn.algolia.com/api/v1/search?query=' + query, [query]);

这样做没有任何好处，因为usemo和useCallback用于惰性评估，而这会导致急切的评估。

getFetchUrl回调的例子不是很说明问题，因为备忘录化没有提供任何改进，它可以简化为：

function SearchResults() {
  const [query, setQuery] = useState('react');

  const fetchUrl = 'https://hn.algolia.com/api/v1/search?query=' + query;

  useEffect(() => {
    // ... Fetch data and do something ...
  }, [fetchUrl]);
}

对于问候示例，useCallback是多余的。如果计算非常昂贵，需要懒惰地评估（在本例中不是），这就是useMemo的作用：

function Greeting({ name }) {
  const result = useMemo(() => {
    return `Hello ${name}`;
  }, [name]);

  return <p>{result}</p>;
}