javascript - React Ant Design - 在功能组件中生成列的最佳位置

Question

我的应用程序有非常密集的表使用。我生成相​​当复杂的表格，并自动计算过滤器(例如映射值数组以获取当前数据集中的可能值)。所以基本上我的观点是它在某些页面上可能会很密集。

就性能而言，使用 Antdesign 在 React 应用程序中生成列的最佳位置是什么？请注意，我们主要使用功能组件，并在需要时使用 useState 钩子(Hook)。

• 在 useState Hook 中，并在生成完成后显示表格
• 直接在 <Table columns={generateCols()}>
• 还有别的事吗？

IMO 第一个的好处是，如果组件重新渲染，它不会重新生成列，但我不确定这一点。第二个更容易维护并且不太复杂，但是如果重新渲染意味着再次生成列，我不确定增益!

谢谢

包含存储在 useState 中的列的代码示例(可能有一些拼写错误，但您可以了解整体情况):

export function TableComponent(props: Props) {
  const { meal, similarMeals } = props;

  const [tableCols, setTableCols] = useState<ColumnProps<meal>[] | undefined>(
    undefined
  );

  useEffect(() => {
    setTableCols(
      generateSimilarMealColumns(
        meal.countOfIngredients,
        meal.similarMeals
      )
    );
  }, [meal.countOfIngredients, meal.similarMeals]);

  return (
    <>
      <Container className={styles.section}>
        {tableCols !== undefined ? (
          <Table<meal>
            rowKey="_id"
            columns={tableCols}
            dataSource={similarMeals}
            pagination={false}
            expandRowByClick={true}
            expandedRowRender={(record) => <p>{record.longDescription}</p>}
          />
        ) : (
          <Spin />
        )}
      </Container>
    </>
  );
}

Answer 1

首先我要说的是，不要过早地做性能方面的事情。如果有效，请继续进行，直到无效为止。

其次，对我来说突出的一件事是每次渲染 Table 组件时都会调用一个函数来生成列。如果渲染 Table 组件的组件被重新渲染，那么您可能会无缘无故地做大量额外的工作。

显示呈现 Table 组件的组件的其余部分 - 这可能是 useMemo 的一个很好的用例.

编辑:作为一种可能性，您可以简单地通过这样做来解决整个问题:

<Table columns={useMemo(generateCols,[... list of dependencies that are used in here])}>