是否有必要在反应表中使用 useMemo ？

Question

我想知道是否有必要在反应表中使用 useMemo 来获取列和数据，如果是，为什么会这样？

这是我的代码：

import React, { useMemo } from "react";
import useData from "../../hooks/useData";
import Table from "./Table";

import Loader from "../../assets/imgs/loader.svg";

const TableSection = React.memo(({ query, isOpen }) => {
  const { data, runtime, error } = useData(query);

  const column =
    data.length > 0 &&
    Object.keys(data[0]).map((key) => {
      const result = data[0][key]
        .replace(/([A-Z]+)/g, " $1")
        .replace(/([A-Z][a-z])/g, " $1");
      return {
        Header: result,
        accessor: key,
      };
    });
  const columns = useMemo(() => column, [column]);
  const queryData = useMemo(() => data.slice(1), [data]);

  if (error)
    return (
      <section
        className={`${
          isOpen ? "col-start-2" : "col-start-1"
        } col-end-3 row-start-3 row-end-4 text-white m-6`}
      >
        <h1 className="text-center font-bold text-xl text-primary-dark">
          Something Went Wrong{" "}
          <span role="img" aria-label="sad face">
            ????
          </span>
        </h1>
      </section>
    );
  return (
    <>
      <section
        className={`${
          isOpen ? "col-start-2" : "col-start-1"
        } col-end-3 row-start-3 row-end-4 text-white mx-6 my-12 lg:mx-12 overflow-hidden`}
      >
        {data.length > 0 ? (
          <>
            <p className="text-primary-dark">
              Query took:{" "}
              <span className="font-bold">{`${runtime.toFixed(2)} ms`}</span>
            </p>
            <Table
              columns={columns}
              completeData={data}
              data={queryData}
              query={query}
            />
          </>
        ) : (
          <img src={Loader} className="w-20 mx-auto" alt="loader" />
        )}
      </section>
    </>
  );
});

export default TableSection;

Answer 1

可以，推荐使用useMemo。

useTable 钩子获取列，如果您的组件由于某种原因重新渲染，将创建一个新的列数组（如果未使用 useMemo）并且useTable 将不必要地重新计算底层逻辑。

顺便说一句，您错误地使用了useMemo，因为column 每次TableSection 重新呈现时都会发生变化，并且它被用作useMemo 的依赖项。如果将声明移到 useMemo 内，则仅当 data 更新时才会更改。所以，这就是你应该如何使用它

const columns = useMemo(() => {
  if (!data[0].length) return [];

  return Object.keys(data[0]).map((key) => {
    const result = data[0][key]
      .replace(/([A-Z]+)/g, ' $1')
      .replace(/([A-Z][a-z])/g, ' $1');

    return {
      Header: result,
      accessor: key,
    };
  });
}, [data]);