Я создаю интерфейс чата в ReactJS, и каждый элемент в журнале чата снова и снова отображает один и тот же значок аватара. В настоящее время проблема, с которой я сталкиваюсь, заключается в том, что при добавлении новых элементов в журнал чата это изображение мигает в каждом элементе списка, что выглядит не очень презентабельно.
Я хочу знать, есть ли способ повторно использовать Component (скорее всего, нет) или данные растрового изображения, чтобы после загрузки в память они могли отображаться быстрее без заметного моргания. Я пытался использовать URL данных, но без особого успеха.
По запросу в комментариях более подробная информация:
У меня есть отдельный Component, чтобы показать каждый элемент журнала чата. Он содержит компонент Image для отображения аватара.
В верхнем журнале я использую FlatList, а в renderItem я отрисовываю указанный компонент журнала чата. Когда сообщение отправляется или принимается, оно добавляется в массив, на который указывает data в FlatList.
Всякий раз, когда элемент добавляется, список перерисовывается, в результате чего Image создается снова (я искал, но не нашел ничего хорошего в добавлении элементов к FlatList, не затрагивая существующих детей). Поэтому я считаю, что решение состоит в том, чтобы ускорить загрузку изображения, чтобы повторный рендеринг не был так заметен.