Если вы хотите разработать чат-приложение с помощью React-Native, вы, вероятно, знаете или используетеreact-native-gifted-chatЭта библиотека, которая является превосходной библиотекой, в основном может удовлетворить потребности большинства проектов разработчиков обмена мгновенными сообщениями.
В моем проекте используется эта библиотека, которая очень хороша и может удовлетворить все мои потребности в обмене мгновенными сообщениями. Но недавно я также обнаружил некоторые проблемы, которые заставили меня искать альтернативы.
Причина этого в том, что в первые дни моего приложения была только одна функция чата, а содержимое сообщения, отображаемое в сеансе, обычно не превышало 100 сообщений, поэтому всегда было хорошо использовать чат с одаренными. Но после недавнего обновления приложения, которое добавило функцию группового чата, мои пользователи начали жаловатьсяТелефон нагревается, интуиция подсказывает мне, что это"Слишком много сообщений в списке сообщений"Причина (у ReactNative всегда была эта проблема при работе с длинными списками). Поэтому я провел тест и отправил графические сообщения в приложении 300-400. В это время я чувствовал, что в приложении были очевидные зависания изображения, а пользовательские сообщения не могли быть отрисованы вовремя, и телефон начал нагреваться. Я пытался оптимизировать эту проблему, и она уже давно оптимизируется, но результаты неудовлетворительны.
Я долго искал в Интернете решение и случайно нашел вгруппа в фейсбукепосмотри кто порекомендуетaurora-imui-react-nativeэта библиотека. Эта библиотека также является библиотекой пользовательского интерфейса чата.
Я попробовал использовать эту библиотеку и проверил, что библиотека все еще может работать без сбоев при отображении сотен сообщений, и у телефона нет проблем с перегревом. Ниже я делаю конкретное сравнение двух библиотек.
Тестирование производительности
Я протестировал два демо-проекта под платформой iOS и протестировал потребление памяти и энергии соответственно.
ОЗУ
Тест текстового сообщения: Отправьте 100, 200, 300, 400 текстовых сообщений для мониторинга использования памяти.
На следующем рисунке показано использование gifted-chat:
На следующем рисунке показано использование aurora-imui:
Память использует две библиотеки менее 100 МБ, а ситуация катана не отображается медленными, хорошими.
Тест сообщения изображения: Отправить 100, 200, 300, 400, 500 соответственнокартинасообщения для мониторинга использования памяти.
На следующем рисунке показано использование gifted-chat:
На следующем рисунке показано использование aurora-imui:
Видно, что потребление памяти одаренным чатом продолжает увеличиваться с увеличением количества картинок, в то время как После того, как aurora-imui отправит 500 изображений, память все еще может поддерживаться на уровне около 33 МБ.
энергопотребление
Когда gifted-chat прислал около 300 картинок, стало очевидно, что телефон греется, а скорость рендеринга не выдерживает.
недостаточный
Конечноaurora-imuiУ него тоже есть свои проблемы.Отсутствует возможность настраивать UI.Так как эта библиотека представляет собой UI-модуль,построенный на нативном коде,то настроить внутренний стиль на стороне JS по желанию нельзя.Вам нужно предоставить Props через aurora- imui для настройки стиля.
##резюме
Как выбрать между двумя библиотеками
В этом случае рекомендуется выбратьaurora-imui-react-native:
- Высокие требования к производительности (низкое энергопотребление)
- Необходимо обрабатывать много сообщений чата (групповой чат)
- Более высокие требования к медиа-сообщениям (изображениям, выражениям, видео)
В этом случае рекомендуется выбратьreact-native-gifted-chat:
- Когда требования к настройке относительно высоки, элементы конфигурации, предоставляемые aurora-imui-react-native, не могут соответствовать требованиям интерфейса.
- Нет необходимости обрабатывать большое количество сообщений
- Предприятиям нужно только обрабатывать текстовые сообщения
автор:Aceyclee
оригинал:How to build your chat UI