Question

因此，我正在阅读Dan Abramov和"A complete Guide to useEffect"的Hooks docs。

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

  // ...
}

Hook文档给出了这一点：

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保留create函数：

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)是useMemo(() => fn)的快捷方式，因此从技术上讲，它可以（错误地）与任何参数一起使用：

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

执行此操作没有任何好处，因为useMemo和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]);
}

以Greeting为例，useCallback是多余的。如果计算确实很昂贵并且需要懒惰地评估（在本示例中不是这样），则useMemo的作用是：

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

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

React Hooks：是否有原因为什么忽略useEffect和useCallback的create或callback不好？

1 个答案: