duxingchen
f04c7e0b99
反馈是展开物料列表卡。实测后端并不慢：/materials/groups 10~18ms，
生产配件 684 条 / 107KB 的 items 只要 16ms，MOM 侧纯 SQL 1.43ms，
category 上还有 idx_base_category 索引 —— 瓶颈全部在前端渲染。
1. Table 既不分页也没虚拟化，LICA/生产配件 的 684 条要一次性建出近 700 个
表格行。改为 virtual + scroll={y:240, x:600}，只渲染可视区那十几行。
（antd 的 virtual 要求 scroll.x/y 都是数字，列宽因此显式指定。）
2. collapseItems 每次重渲染都重建全部 Table 元素，而每个分组在「开始加载」
和「加载完成」各触发一次 forceRefresh —— 点「全部展开」就是十几次全量
重建，这才是卡顿主因。改用 useMemo；tick 必须进依赖，因为 groupCache /
groupLoadingMap 都是 ref。
3. columns 与 handleSelect 一并 memo 化，否则第 2 条 memo 每次都会失效。
4. 打开对话框时 useEffect([open]) 与 useEffect([keyword]) 会各请求一次
/materials/groups。用 lastSearchedRef 记录「上次已搜索的词」，跳过
setKeyword("") 重置造成的那次重复请求。
React + TypeScript + Vite
This template provides a minimal setup to get React working in Vite with HMR and some Oxlint rules.
Currently, two official plugins are available:
- @vitejs/plugin-react uses Oxc
- @vitejs/plugin-react-swc uses SWC
React Compiler
The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see this documentation.
Expanding the Oxlint configuration
If you are developing a production application, we recommend enabling type-aware lint rules by installing oxlint-tsgolint and editing .oxlintrc.json:
{
"$schema": "./node_modules/oxlint/configuration_schema.json",
"plugins": ["react", "typescript", "oxc"],
"options": {
"typeAware": true
},
"rules": {
"react/rules-of-hooks": "error",
"react/only-export-components": ["warn", { "allowConstantExport": true }]
}
}
See the Oxlint rules documentation for the full list of rules and categories.