时间戳

首页 > 解决方案 > React Ant Design - 在功能组件中生成列的最佳位置

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

问题描述

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

在性能方面，使用 Antdesign 在 React App 中生成列的最佳位置是什么？请注意，我们主要使用函数式组件，并在需要时使用 useState 钩子。

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>
    </>
  );
}

标签： javascriptreactjsantd

解决方案

让我先说不要过早地做 perf 的事情。如果有效，请继续进行，直到无效为止。

其次，让我印象深刻的一件事是，每次渲染 Table 组件时，您都在调用一个函数来生成列。如果渲染您的组件的Table组件被重新渲染，那么您可能会无缘无故地做一堆额外的工作。

Show the rest of the component that renders your Table component - this might be a good use case for useMemo.

EDIT: As a possibility, you might be able to fix the whole thing simply by doing this:

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

推荐阅读