1

我在 ReactJS 中制作了一个聊天界面,聊天记录中的每一项都一遍又一遍地显示相同的头像图标。目前我面临的问题是,当在聊天日志中添加新项目时,此图像会在每个列表项中闪烁,看起来不太像样。

我想知道是否有办法重用Component(很可能不是)或位图数据,以便一旦加载到内存中,它可以更快地显示而不会出现可察觉的闪烁。我曾尝试使用数据 URL,但没有多大用处。

根据评论中的请求进一步详细信息:

我有一个单独Component的来显示每个聊天日志项。它包含一个Image显示头像的组件。

在顶部日志中,我使用的是 a FlatList,并且在renderItem渲染所述聊天日志组件。data每当发送或接收任何消息时,它都会附加到inFlatList指向的数组中。

每当添加一个项目时,列表都会重新呈现,从而导致Image再次创建(我已经搜索但没有发现将项目附加到 aFlatList而不影响现有子级的任何好处)。因此,我相信解决方案在于使图像加载更快,以便重新渲染不那么可感知。

4

1 回答 1

1

我想到闪烁的一个原因是,如果您重新分配key列表项并将forcing其重新渲染。检查是否有这种情况。这是组件在列表视图上重新渲染的主要原因之一。

于 2019-05-20T08:54:47.290 回答