react-virtualized 无限列表图片闪屏问题修复
背景
最近在使用 react-vertualized 库，开发一个无限滚动列表过程中，遇到一个问题。列表虽然可以一致滚动，但是列表的图片会突然的闪烁一下，找了很多地方，都没有结论，这里记录一下自己的解决方案。
方案
无限滚动列表如下图所示
我的需求是通过 react-virtualized 实现一个照片墙。
图片闪烁，我先分析核心原因应该是图片重新渲染了，我找了很多导致图片重新渲染的地方，都没发现是啥影响了，图片的重复渲染。
没办法，只能退而求其次，转变思路，既然不能找到源头的问题，那我就解决自身问题，将图片的渲染缓存起来，避免重复渲染。
const ImageCell = React.memo<ImageCellProps>({img, onClick}) => {
...
}, (prevProps, nextProps) => {
// 深度比较：比较 img 对象的所有属性
const prevImg = prevProps.img;
const nextImg = nextProps.img;
// 如果 id 不同，需要更新
if (prevImg.id !== nextImg.id) {
return false; // 需要更新
}
// 如果 id 相同，比较其他可能变化的属性
const shouldUpdate =
prevImg.url !== nextImg.url ||
prevImg.timestamp !== nextImg.timestamp;
return !shouldUpdate; // 返回 true 表示 props 相同，不需要更新
})核心逻辑有两点：
使用 React.memo 缓存图片组件，避免图片重新渲染
使用对象深度比较的方法，而不是对象相等的比较
至此，我的图片闪烁问题就得到了解决。希望以上有所帮助。
原文地址：https://webfem.com/post/react-virtualized-yh，转载请注明出处
webfem 博客
最新工具
