将数据附加到列表的开头会在react中重新加载整个列表

Question

我有一个代表图像的项目数组，每个项目都包含图像数据和元数据，例如唯一键和图像链接。我的目标是在屏幕上显示图像列表，每当我向下滚动时，它就会加载下一组数据，反之亦然，当我向上滚动时。问题是，当我向下滚动并附加下一组图像时，它工作正常，现有图像保持原样。但是当我向上滚动时，DOM 中现有的图像会再次重新加载。如果有很多图像，这会减慢应用程序的速度。

这是图像列表的显示方式：

function ImageList(props) 
{
const [imageItems, setItems] = useState([]);
return {imageItems && imageItems.map((newItem, index) => (
            <>
              <AppImage key={newItem.Id}></AppImage>
</>
}

如何附加项目：

setItems(imageItems.concat(resultArrayFromAPI))

如何在开始时添加项目

setItems(resultArrayFromAPI.concat(imageItems))

第二种方式会导致再次重新加载所有图像

我尝试将AppImage组件包装在react.memo中，但它不起作用。我希望在开始时添加项目时行为相同

Answer 1

您是否尝试过使用上一个状态来更新下一个状态。 setItems((imageItems) => [...resultArrayFromAPI, ...imageItems]

这是一个建议，而不是一个明确的答案，因为我无法添加评论。 如果没有帮助请随意删除。