翻譯 | 如何構建聊天界面

英文原文地址：https://blog.usejournal.com/how-to-build-your-chat-ui-c4573a74dfe5

如果你想使用 React-Native 開發一款聊天應用，你很可能會了解或者使用 react-native-gifted-chat 這個庫，這是一個很優秀的庫，使用靈活基本能夠滿足大部分開發者的 IM 項目需求。

我的項目就使用這個庫，很不錯，基本能夠滿足了我所有的 IM 需求。不過最近我也發現了一些問題，迫使我尋找替代方案。

事情的起因是：我的應用早期只有單聊功能，一個會話顯示的消息內容一般不會超過 100 條消息，所以用 gifted chat 一直還不錯。但最近應用更新，添加了群聊功能後，我的用戶開始抱怨 手機發燙厲害，直覺告訴我這是「消息列表中的消息數量太多」導致的（ReactNative 在處理長列表問題一直有這個問題）。

於是我進行了測試，在應用中發送 300~400 條圖文消息，此時能夠感覺到應用有明顯的圖片卡頓和自定義消息無法及時渲染，並且手機開始發燙。我試圖優化處理這個問題，優化了很久但效果也不盡如人意。

我在網上搜索了很久的解決方案，無意中在 Facebook 群組 中看到有人推薦

aurora-imui-react-native 這個庫。這個庫也是一個聊天 UI 庫。

我嘗試使用這個庫，測試該庫在顯示幾百條消息時依然能夠流暢的運行，並且手機也沒有出現發燙的問題。以下我對兩個庫進行具體的比較。

性能測試

我在 iOS 平台下對兩個 Demo 項目進行測試，分別測試了內存和能耗。

內存

文本消息測試：

分別發送 100、200、300、400 條文本消息，監測內存的使用情況。

下圖是 gifted-chat 的使用情況：

下圖是 aurora-imui 的使用情況：

兩個庫的內存使用都在 100MB 以內，且沒有出現卡頓渲染慢的情況，表現都不錯。

圖片消息測試:

分別發送 100、200、300、400、500 條圖片消息，監測內存使用情況。

下圖是 gifted-chat 的使用情況：

下圖是 aurora-imui 的使用情況：

可以看到隨著圖片的增加 gifted-chat 消耗的內存在不斷的增加，而

aurora-imui 在發送500 張圖片後，內存依然能夠保持在 33MB 左右。

能耗

gifted-chat 大概發送到 300 張圖片的時候，能夠明顯感覺到手機在發燙，渲染速度跟不上。

不足

當然 aurora-imui 也有它的問題，自定義 UI 能力有所欠缺，由於這個庫是使用原生代碼構建的 UI 模塊，所以不能隨意在 JS 端調整內部樣式，需要通過 aurora-imui 提供 Props 來自定義樣式。

小結

兩個庫應該如何抉擇

下面這種情況建議選擇 aurora-imui-react-native ：

• 對性能要求較高（低能耗）
• 需要處理大量聊天消息（群聊）
• 對媒體消息要求較高（圖片、表情、視頻）

下面這種情況建議選擇 react-native-gifted-chat：

• 對自定義要求比較高，aurora-imui-react-native 提供的配置項無法滿足界面需求的時候。
• 不需要處理大量消息。
• 業務只需要處理文本消息。

轉載請註明出處，謝謝。

推薦閱讀：