React-Native-Gifted-Chat 性能问题答案

【问题标题】：React-Native-Gifted-Chat perfornance issueReact-Native-Gifted-Chat 性能问题
【发布时间】：2020-05-15 20:02:43
【问题描述】：

当我收到此错误时，相同的消息数据会附加到聊天列表中，然后它会崩溃。

我正在尝试使用 react-native-gifted-chat 编写聊天应用程序，我希望用户收到超过 15.000 条消息，但我的天才聊天甚至无法处理 1000 条消息。它给出了这个错误。

我通过socket从mongodb获取数据。

有没有什么方法可以以非常好的性能呈现消息数据？我对此进行了很多研究，PureComponent 等。没有任何作用：/

【问题讨论】：

标签： javascript mongodb react-native socket.io react-native-gifted-chat

【解决方案1】：

我认为如果你想达到你的目标，你应该用来自 react native 的FlatList 替换呈现消息的组件。并将 initialNumToRender 设置为 10-15 之类的小数字。我在一个类似的聊天应用程序中使用了这种方式，但没有使用天才聊天（从头开始制作）。

这是我呈现消息的方法，并且在任何数量的消息上都没有问题：

<FlatList
    inverted
    windowSize={5}
    removeClippedSubviews={true}
    initialNumToRender={15}
    data={this.props.messages}
    ref={ref => this.flatList = ref}
    onLayout={this.onLayout}
    renderItem={this.renderItem}
    keyExtractor={(item) => `${item.message_id}`}
/>

【讨论】：

我做了你所说的作为天才聊天中的 listview 道具，但同样的：/
这极大地提高了我的性能哇！谢谢
您好，我也有类似的问题，请您看看。stackoverflow.com/questions/65277256/…