通过示例理解React Hook useMemo()

Question

我试图通过将下面的函数转换为不使用useMemo()钩子来理解React hook useMemo()，但我没有成功，也没有正确理解它的inns。使用useMemo()的函数映射对象数组并返回5行：

  const productTableDisplayData = useMemo(
    () =>
      products.map((product) => [
        product.id,
        product.title,
        `${product.title} ${appendToTitle}`,
        product.descriptionHtml,
        `${product.descriptionHtml}${appendToDescription}`,
      ]),
    [products, appendToTitle, appendToDescription]
  );

我试图将上面的代码写到下面的代码中，但是没有成功，函数也没有返回上面的代码：

 const productTableDisplayData = 
    () => {
     return products.map((product) => {
        product.id,
        product.title,
        `${product.title} ${appendToTitle}`,
        product.descriptionHtml,
        `${product.descriptionHtml}${appendToDescription}`
      })
}

Answer 1

useMemo返回值。不是函数。因此，您需要将productTableDisplayData更新为：

const productTableDisplayData = products.map((product) => {
  product.id,
  product.title,
  `${product.title} ${appendToTitle}`,
  product.descriptionHtml,
  `${product.descriptionHtml}${appendToDescription}`;
});

Answer 2

当useMemo调用它的函数并返回结果时，useCallback返回未被调用的函数，这样您可以稍后调用它。

useCallback(fn, deps)等同于useMemo(() => fn, deps)。

如果您尝试使用第二个代码块，则必须应用useCallback。否则，越南的答案对useMemo来说是很棒的

Answer 3

• useMemo返回Value
• useCallback返回Function

So

• 要从useMemo返回中呈现，只需将其放入jsx中即可。
• 要呈现useCallback返回，您需要调用函数。

下面是您的代码的简化版本，因此您将有一个更清晰的画面。

import React, { useCallback, useMemo } from "react";
import ReactDOM from "react-dom";

const products = [
  { id: "1", title: "one" },
  { id: "2", title: "two" }
];

const App = () => {
  const productFromUseMemo = useMemo(
    () => products.map((product) => [product.id, product.title]),
    []
  );

  const productFromUseCallback = useCallback(
    () => products.map((product) => [product.id, product.title]),
    []
  );

  return (
    <div>
      <div>{productFromUseMemo}</div>
      <div>{productFromUseCallback()}</div>
    </div>
  );
};

ReactDOM.render(<App />, document.getElementById("container"));