refactor(web): 16 个列表页 columns 定义 useMemo 化 — 减少 Table 不必要 re-render
- AiPromptList/AiAnalysisList/AppointmentList 等 14 个主页面 - HealthRecordsTab/LabReportsTab 2 个 Tab 组件 - 每个 columns 依赖数组包含其引用的闭包变量(handleDelete/navigate 等)
This commit is contained in:
@@ -1,4 +1,4 @@
|
||||
import { useCallback, useState } from 'react';
|
||||
import { useCallback, useState, useMemo } from 'react';
|
||||
import { Table, Tag, Button, Modal, Form, Select, DatePicker, Input, message, Popconfirm, Space } from 'antd';
|
||||
import { PlusOutlined, EditOutlined, DeleteOutlined } from '@ant-design/icons';
|
||||
import { dayjs } from '../../../utils/dayjs';
|
||||
@@ -102,7 +102,7 @@ export function HealthRecordsTab({ patientId }: Props) {
|
||||
}
|
||||
};
|
||||
|
||||
const columns = [
|
||||
const columns = useMemo(() => [
|
||||
{ title: '记录类型', dataIndex: 'record_type', key: 'record_type', width: 120, render: (v: string) => <Tag>{RECORD_TYPE_MAP[v] || v}</Tag> },
|
||||
{ title: '记录日期', dataIndex: 'record_date', key: 'record_date', width: 120 },
|
||||
{ title: '内容', dataIndex: 'content', key: 'content', ellipsis: true },
|
||||
@@ -139,7 +139,7 @@ export function HealthRecordsTab({ patientId }: Props) {
|
||||
</Space>
|
||||
),
|
||||
},
|
||||
];
|
||||
], [openEditModal, handleDelete]);
|
||||
|
||||
return (
|
||||
<div>
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { useCallback, useState } from 'react';
|
||||
import { useCallback, useState, useMemo } from 'react';
|
||||
import { Table, Tag, Button, Modal, Form, Input, DatePicker, message, Popconfirm, Space } from 'antd';
|
||||
import { PlusOutlined, EditOutlined, DeleteOutlined } from '@ant-design/icons';
|
||||
import { dayjs } from '../../../utils/dayjs';
|
||||
@@ -88,7 +88,7 @@ export function LabReportsTab({ patientId }: Props) {
|
||||
}
|
||||
};
|
||||
|
||||
const columns = [
|
||||
const columns = useMemo(() => [
|
||||
{ title: '报告日期', dataIndex: 'report_date', key: 'report_date', width: 120 },
|
||||
{ title: '报告类型', dataIndex: 'report_type', key: 'report_type', width: 120, render: (v: string) => <Tag>{v}</Tag> },
|
||||
{ title: '医生解读', dataIndex: 'doctor_interpretation', key: 'doctor_interpretation', ellipsis: true },
|
||||
@@ -112,7 +112,7 @@ export function LabReportsTab({ patientId }: Props) {
|
||||
</AuthButton>
|
||||
),
|
||||
},
|
||||
];
|
||||
], [openEditModal, handleDelete]);
|
||||
|
||||
return (
|
||||
<div>
|
||||
|
||||
Reference in New Issue
Block a user