SuperAPI AI 工具集

positron-data-grid-pattern

前端与建站

查看项目

更新于 10-16 03:44

技能介绍

用途:在 Positron 中构建列表、表格、网格或虚拟滚动界面,或涉及 DataGridInstance / PositronDataGrid 时使用,避免常见错误。

核心思路:DataGridInstance 子类本身就是数据网格,持有条目/数据、条目渲染器、布局(列宽、行高、覆盖、固定)、选择、光标、滚动位置以及对外事件。<PositronDataGrid instance={...} /> 是覆盖任意 DataGridInstance 子类的轻量 React 渲染器,不持有状态,只观察实例并绘制。

使用方式:调用方在组件生命周期内只创建一个实例,const [instance] = useState(() => new MySubclass({ /* options */ }));按需订阅实例事件并在卸载时 dispose;最后渲染 <PositronDataGrid instance={instance} />。

两种数据策略:嵌入策略适用于中小型列表,子类用私有字段保存条目,调用方通过 setter(如 setItems)推入,fetchData() 为空实现,示例 PositronListInstance;fetchData 策略适用于超大或后端数据,基类在视图需要单元格时调用 fetchData(rowStartIndex, rowCount, columnStartIndex, columnCount),子类连接后端并填充缓存,cell(col, row) 从缓存返回,通常自行持有 schema/列,示例 TableDataDataGridInstance、TableSummaryDataGridInstance、InlineTableDataGridInstance、ColumnSelectorDataGridInstance。

反模式:不要构建 React 包装组件,用 useMemo/useState 持有实例,再通过大量 useEffect 把 props 推入实例并镜像事件;若出现一堆只调用 setter 的 useEffect、构造选项变化即重建实例等迹象,应删除包装,让调用方直接驱动实例。

行为定制:子类在构造函数中向 super(...) 传选项(行列头、滚动条、固定、选择、调整大小、自动布局等),渲染器据实例配置自适应;若基类未暴露所需行为,通常要侵入式修改基类选项类型与构造。新增网格前先参考现有子类。限制:资料未提供具体安装命令、版本要求或平台说明。