Question

我正在实现一个聊天应用程序，该聊天应用程序在FlatList的帮助下呈现了聊天窗口中的所有消息。将View挂起并冻结后，当我进行一些研究时，我添加了PureComponent以使其更好地工作。但是，即使在将renderItem组件设为纯组件之后，性能也没有太大差异。该如何解决？

这是我的代码：

                <FlatList
                ListEmptyComponent={this.renderEmpty}
                data={this.state.messages}
                renderItem={this.renderItem}
                extraData={this.state.sent}
                keyExtractor={(item) => {
                  return item.id;
                }}
                ref={(ref) => (messagelist = ref)}
                onContentSizeChange={() => this._onContentSizeChange()}
                onRefresh={this._handleRefresh}
                refreshing={this.state.refreshing}
              />

renderItem（）：

renderItem = ({ item, index }) => {
     return (
      <MyListItem
        onLongPress={() => this.showActionSheet(item, index)}
        index={index}
        uid={this.state.uid}
        item={item}
      />
    );
  };

onChangeText

  onChangeText={(text) => {
     this.setState({ txtMessage: text });
    }

sendMessage：

      sendMessage() {
    let { uid } = this.state;
    this.setState({ sent: true });
    var receiverType = CometChat.RECEIVER_TYPE.USER;
    var textMessage = new CometChat.TextMessage(
      uid,
      this.state.txtMessage,
      receiverType
    );
    this.setState({
      txtMessage: "",
    });
    //CometChat.endTyping(typingNotification);
    CometChat.sendMessage(textMessage).then(
      (message) => {
        this.setState((state) => {
          return state.messages.push(message);
        });
      },
      (error) => {
        this.setState({ spinner: false });
        console.log("Message sending failed with error:", error);
      }
    );
  }

发生什么情况是，每当用户在调用onChangeTextInput时输入一些内容时，都会进行n次重渲染，其中n是在“聊天”窗口中渲染的消息数。如何克服这个问题？

react-native：Flatlist性能问题，并重复重新呈现onChangeTextInput

0 个答案: