antd table 表格 增加记录 仅更新可视区域数据 observer = new IntersectionObserver

### 使用 IntersectionObserver 实现 Ant Design Table 的增量更新策略 Intersection Observer API 提供了一种高效的方式用于检测目标元素何时进入或离开视口范围。将其应用于 Ant Design 的 Table 组件可以实现仅更新可视区域数据的功能，特别是在动态增加记录时能够有效减少不必要的重绘操作。 #### 基本概念与工作流程 当新记录被添加到表格中时，如果这些记录不在当前视口中，则无需立即对其进行渲染。通过使用 IntersectionObserver 来监控每一行的状态，在它们即将进入视口之前才执行相应的渲染逻辑[^1]。 具体来说，我们可以创建一个自定义 Hook 或者组件封装此功能，并绑定到每一条表单项之上。一旦某项进入了用户的视线范围内，就触发回调函数完成对该条目的初始化或者刷新动作。 下面是一个简单的例子展示如何利用 intersection observer api 结合 ant design table 进行动态加载更多内容： ```jsx import React, { useRef, useEffect } from 'react'; import { Table } from 'antd'; function LazyLoadTable({ columns, fetchData }) { const lastItemRef = useRef(null); useEffect(() => { const observer = new IntersectionObserver( (entries) => { entries.forEach(entry => { if (entry.isIntersecting && entry.target === lastItemRef.current) { fetchData(); // 当最后一个可见元素接近屏幕边缘时请求下一批次的数据。 } }); }, { threshold: 0.5 } // 可调参数决定什么时候认为两个对象相交. ); if (lastItemRef.current){ observer.observe(lastItemRef.current); } return () => { if (lastItemRef.current){ observer.unobserve(lastItemRef.current); } }; }, [fetchData]); return ( <Table rowKey="id" columns={columns} dataSource={(data || []).map((item, index) => (<React.Fragment key={index}> { /* 渲染常规列 */} {(index === data.length -1 ) ? <tr ref={lastItemRef}><td colSpan={columns.length}></td></tr> : null} </React.Fragment>) )} /> ); } export default LazyLoadTable; ``` 在这个例子当中，我们为最后的一行设置了特殊的标记 `<tr>` 并赋予它 `ref=lastItemRef`, 那么每当这个特定的 tr 即将出现在屏幕上时就会激活我们的 fetch 新批次数据的操作[^2]. 值得注意的是这里假设每次获取的新数据都会追加到现有的列表后面形成连续性的浏览体验. --- #### 关键点解析 - **IntersectionObserver**: 此API允许开发者轻松跟踪DOM树中的某个节点相对于另一个节点(通常是浏览器窗口)的位置变化情况。相比传统的scroll事件监听器而言效率更高也更易于维护。 - **Lazy Loading Pattern**: 对于大规模数据集尤其重要，因为它避免了一次性下载全部资源造成页面响应缓慢等问题的发生。 - **Performance Optimization**: 减少了无谓的dom操作次数提高了整体性能表现.