React Native聊天应用消息发送卡顿问题及性能优化咨询

问题背景 #

我正在开发一款以聊天为核心功能的React Native应用，使用useState([]) Hook存储聊天消息，通过FlatList组件渲染消息。发送或接收消息时，采用setMessages([...messages, {newMessageData}])的方式更新消息列表。但当聊天消息积累到一定数量后，仅发送消息（排除服务器处理时间）到消息在FlatList中显示会出现明显延迟，需要优化性能以实现流畅的实时聊天体验。

当前代码 #

const [messages, setMessages] = React.useState([{datetime: new Date(), content: "", sender: "", num: "amfu", new:[]}])

const addMessage = (sender, content, id, hasImage, image) => {
    let data = {}
  
    if(messages.length >= 0){
        data = {"sender": sender, "content": content, "num": messages.length, 
        "read":true, "datetime": new Date(), "id": id, "reactions": {"user": "", "other": "", "has":false}, "hasImage": hasImage,
        "image": hasImage ? image : null}
    } else {

    }

    setMessages([data, ...messages])
    setText("")
  }


<FlatList 
      data={messages}   
      renderItem={handleM}
      keyExtractor={(item) => item.num} 
      inverted={true} 
      style={{maxHeight: "90%", height: "auto", paddingTop: 100,}}
      contentContainerStyle={{ flexGrow: 1 }}  
      ref={listRef}
      scrollEnabled={isLongPressed == ""} 
    />

具体优化措施 #

1. 修复状态更新的闭包问题 #

当前直接使用[data, ...messages]更新状态，可能因闭包拿到旧的messages值导致状态更新不及时，且每次创建新数组的开销会随消息数量增加而变大。改用函数式更新确保拿到最新状态：

setMessages(prevMessages => [data, ...prevMessages])

2. 优化FlatList核心配置 #

(1) 添加getItemLayout减少动态布局计算

FlatList默认会逐个计算item高度，消息量越大耗时越长。如果消息item高度固定（或可预估），添加该属性跳过动态计算：

getItemLayout={(data, index) => ({
  length: 80, // 替换为你的消息Item实际高度
  offset: 80 * index,
  index,
})}

(2) 开启removeClippedSubviews清理屏幕外视图

自动移除不在可视区域内的item，降低内存占用和渲染压力：

removeClippedSubviews={true}

注意：需给消息Item设置明确的高度，否则可能出现显示异常。

(3) 更换稳定的keyExtractor

当前用item.num（基于消息列表长度）作为key，当消息顺序变化或删除时会导致key不稳定，React无法正确复用组件。改用后端返回的唯一item.id：

keyExtractor={(item) => item.id}

(4) 控制批量渲染数量

通过maxToRenderPerBatch和windowSize限制单次渲染的item数量，避免一次性渲染大量内容：

maxToRenderPerBatch={10} // 每次批量渲染10个item
windowSize={5} // 仅渲染可视区域前后5个屏幕范围的item

3. 优化状态管理逻辑 #

(1) 简化addMessage逻辑

messages.length >=0永远为真，可删除多余的else分支，减少代码冗余：

const addMessage = (sender, content, id, hasImage, image) => {
    const data = {
        "sender": sender, 
        "content": content, 
        "num": messages.length, 
        "read":true, 
        "datetime": new Date(), 
        "id": id, 
        "reactions": {"user": "", "other": "", "has":false}, 
        "hasImage": hasImage,
        "image": hasImage ? image : null
    }
    setMessages(prev => [data, ...prev])
    setText("")
}

(2) 用useReducer替代useState

当状态更新频繁且逻辑复杂时，useReducer比useState更高效，能更好地封装状态更新逻辑：

const messageReducer = (state, action) => {
  switch (action.type) {
    case 'ADD_MESSAGE':
      return [action.payload, ...state];
    default:
      return state;
  }
};

const initialMessages = [{datetime: new Date(), content: "", sender: "", num: "amfu", new:[]}];
const [messages, dispatch] = React.useReducer(messageReducer, initialMessages);

// 添加消息时调用
dispatch({ type: 'ADD_MESSAGE', payload: data });

(3) 分页加载历史消息

不要一次性加载所有历史消息，当用户滚动到列表顶部时再加载更早的消息，减少单次渲染的数据量。

4. 优化消息Item组件 #

(1) 用React.memo减少不必要重渲染

给消息Item组件包裹React.memo，仅当props变化时才重新渲染：

const MessageItem = React.memo(({ item }) => {
  // 消息Item的渲染逻辑
});

const handleM = ({ item }) => <MessageItem item={item} />;

(2) 图片懒加载

如果消息包含图片，不要立即加载，监听滚动位置，当Item进入可视区域时再加载图片，避免大量图片同时加载导致的卡顿。

内容的提问来源于stack exchange，提问作者Itay Lador