javascript - React-Native-Gifted-Chat 性能问题

Question

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

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

我通过套接字从 mongodb 获取数据。

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

标签： javascriptmongodbreact-nativesocket.ioreact-native-gifted-chat

Answer 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}`}
/>