perf(web): PluginCRUDPage columns 包裹 useMemo 避免重渲染

columns 依赖 fields/resolvedLabels/labelMeta,搜索输入时不再重建列定义。
This commit is contained in:
iven
2026-04-27 09:57:41 +08:00
parent 0929825ae7
commit 1c7184b6bc

View File

@@ -1,4 +1,4 @@
import { useEffect, useState, useCallback } from 'react';
import { useEffect, useState, useCallback, useMemo } from 'react';
import { useParams } from 'react-router-dom';
import {
Table,
@@ -305,8 +305,8 @@ export default function PluginCRUDPage({
}
};
// 动态生成列
const columns = [
// 动态生成列memo 化避免输入搜索时重建)
const columns = useMemo(() => [
...fields.slice(0, 5).map((f) => ({
title: f.display_name || f.name,
dataIndex: f.name,
@@ -315,7 +315,6 @@ export default function PluginCRUDPage({
sorter: f.sortable ? true : undefined,
render: (val: unknown) => {
if (typeof val === 'boolean') return val ? <Tag color="green"></Tag> : <Tag></Tag>;
// 引用字段 → 显示解析后的标签
if (f.ref_entity) {
const uuid = String(val ?? '');
if (!uuid || uuid === '-') return '-';
@@ -366,7 +365,7 @@ export default function PluginCRUDPage({
</Space>
),
},
];
], [fields, resolvedLabels, labelMeta, hasDetailPage, handleDelete]);
// 动态生成表单字段
const renderFormField = (field: PluginFieldSchema) => {