如何为React Native Gifted Chat添加Memo，仅新增消息时重渲染？

可以通过React.memo结合稳定props的方式实现仅在新增消息时重渲染，核心是确保传给GiftedChat的所有props只有在必要时才更新引用，具体操作如下：

1. 稳定回调类props #

用useCallback包裹所有回调函数，避免每次父组件渲染时创建新的函数引用：

import { useCallback } from 'react';

// 组件内部定义回调，添加正确的依赖项
const onHandleSend = useCallback((messages) => {
  // 你的消息发送逻辑
}, []);

const handleNavigateToUser = useCallback((user) => {
  // 头像点击跳转逻辑
}, []);

const renderAction = useCallback(() => {
  // 自定义操作栏渲染逻辑
}, []);

const renderChatFooter = useCallback(() => {
  // 聊天底部区域渲染逻辑
}, []);

const renderMessage = useCallback((props) => {
  // 自定义消息渲染逻辑（比如优化图片加载）
  return <YourCustomMessageComponent {...props} />;
}, []);

2. 稳定静态对象props #

将user对象提取到组件外部或用useMemo缓存，避免每次渲染创建新对象：

// 组件外部定义，全局保持引用稳定
const CURRENT_USER = { _id: 1 };

// 或在组件内部用useMemo缓存
const currentUser = useMemo(() => ({ _id: 1 }), []);

3. 处理动态props的稳定性 #

对于text属性，若image状态变化不需要触发GiftedChat重渲染，用useMemo缓存其值：

const chatText = useMemo(() => (image ? ' ' : ''), [image]);

4. 用React.memo包裹GiftedChat（可选） #

若上述优化后仍有不必要的重渲染，可通过React.memo自定义比较逻辑，仅在messages变化时触发重渲染：

import { memo } from 'react';

const MemoizedGiftedChat = memo(GiftedChat, (prevProps, nextProps) => {
  // 仅当消息数组长度变化或最后一条消息不同时，才重渲染
  return prevProps.messages.length === nextProps.messages.length &&
         prevProps.messages[prevProps.messages.length - 1]?._id === nextProps.messages[nextProps.messages.length - 1]?._id;
});

5. 最终整合代码示例 #

import { useCallback, useMemo, memo, useState } from 'react';
import GiftedChat from 'react-native-gifted-chat';

const CURRENT_USER = { _id: 1 };
const MemoizedGiftedChat = memo(GiftedChat, (prevProps, nextProps) => {
  return prevProps.messages.length === nextProps.messages.length &&
         prevProps.messages[prevProps.messages.length - 1]?._id === nextProps.messages[nextProps.messages.length - 1]?._id;
});

const YourChatComponent = () => {
  const [messages, setMessages] = useState([]);
  const [image, setImage] = useState(null);

  const onHandleSend = useCallback((newMessages) => {
    setMessages(prev => GiftedChat.append(prev, newMessages));
  }, []);

  const handleNavigateToUser = useCallback((user) => {
    // 跳转逻辑实现
  }, []);

  const renderAction = useCallback(() => {
    // 自定义操作栏实现
  }, []);

  const renderChatFooter = useCallback(() => {
    // 自定义底部实现
  }, []);

  const renderMessage = useCallback((props) => {
    // 自定义消息渲染，比如图片懒加载处理
    return <CustomMessage {...props} />;
  }, []);

  const chatText = useMemo(() => (image ? ' ' : ''), [image]);

  return (
    <MemoizedGiftedChat
      messages={messages}
      renderMessage={renderMessage}
      onSend={onHandleSend}
      onPressAvatar={handleNavigateToUser}
      renderActions={renderAction}
      renderChatFooter={renderChatFooter}
      keyboardShouldPersistTaps='handled'
      text={chatText}
      alwaysShowSend={true}
      locale='DE'
      user={CURRENT_USER}
    />
  );
};

关键注意点 #

• 确保messages采用不可变方式更新（比如用GiftedChat.append或展开运算符），保证新增消息时messages引用变化。
• 若自定义消息组件（如CustomMessage）也存在性能问题，同样用React.memo包裹优化。
• 自定义memo比较逻辑时，需结合业务场景调整，避免漏判必要的重渲染场景。

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