React聊天应用重复渲染问题：如何避免链接预览重复请求？

核心问题原因 #

你的组件重复渲染、链接重复请求的根源有三个：

1. 用index作为组件key：当新增消息时，数组后续元素的index会发生变化，React会认为这些是新组件，直接销毁重建而非复用。
2. 传递了冗余的props：ChatMessage组件并未用到text这个全量消息数组，但每次新增消息时text是新数组引用，memo会判定props变化触发重新渲染。
3. 无请求缓存机制：即使组件重新渲染，也没有对已请求过的URL做缓存，导致重复发起网络请求。

具体修复步骤 #

1. 替换组件key，用消息唯一标识

在Chat.jsx中，把map的key从index改成消息的唯一ID（比如消息自带的id或唯一的timestamp）：

{members.length > 0 && text.map((m) => { 
  return <ChatMessage 
    key={m.id} // 替换为消息的唯一标识符，避免index导致的组件重建
    m={m} 
    isMessageSending={isMessageSending} 
  /> 
})}

2. 移除冗余props

删掉ChatMessage组件未使用的text和index参数，减少props变化触发的渲染：

// ChatMessage.jsx
export const ChatMessage = memo(({ m, isMessageSending }) => {
  // ... 原组件逻辑（去掉text和index相关代码）
})

3. 添加URL请求缓存

用useRef在组件内部缓存已请求过的链接数据，避免重复请求：

// ChatMessage.jsx
import { memo, useState, useEffect, useRef } from 'react';

export const ChatMessage = memo(({ m, isMessageSending }) => {
    const { usersRef } = useContext(PageContext);
    const [userMessageData, setUserMessageData] = useState({});
    const isSentByMe = m.sentBy === auth.currentUser.uid;
    const [linkData, setLinkData] = useState({});
    // 缓存已请求的URL数据
    const linkCache = useRef({});

    useEffect(() => {
        if(!m.message) return;

        const fetchLinkData = async () => {
            // 优先用缓存，避免重复请求
            if (linkCache.current[m.message]) {
                setLinkData(linkCache.current[m.message]);
                return;
            }

            if (isValidUrl(m.message)) {
                const data = await fetchDataFromLink(m.message);
                linkCache.current[m.message] = data.result;
                setLinkData(data.result);
            } else {
                setLinkData({});
            }
        }

        fetchLinkData();
    }, [m.message]);

    return (
        <div> ... </div>
    )
});

4. 优化memo的比较逻辑（可选）

如果消息对象的引用会频繁变化（比如每次更新都重新创建对象），可以给memo传入自定义比较函数，只对比关键属性：

export const ChatMessage = memo(({ m, isMessageSending }) => {
  // ... 组件逻辑
}, (prevProps, nextProps) => {
  // 仅对比消息ID、内容和isMessageSending状态
  return prevProps.m.id === nextProps.m.id && 
         prevProps.m.message === nextProps.m.message &&
         prevProps.isMessageSending === nextProps.isMessageSending;
});

5. 缩小isMessageSending的作用范围（可选）

如果isMessageSending是全局状态，建议改为仅给当前正在发送的消息组件传递true，其他组件传递false，避免全局状态变化触发所有组件渲染。

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