React聊天消息列表状态更新与性能优化：是否遵循最佳实践？

我查阅过许多相关问题，但仍未找到贴合需求的答案，希望能巩固对React中key的理解。

假设ChatList组件从状态中获取聊天消息列表并渲染（此处使用Effector，同样适用于Redux等状态管理库）：

const ChatMessage = React.memo(({ text }) => {
    return <div>
        {text}
    </div>
})

const getKey = ({ id, read, delivered, pending }) => `${id}_${read}_${delivered}_${pending}`;

const ChatList = React.memo(() => {
    const chatMessages = useUnit($chatMessages);

    const mappedMessages = React.useMemo(() => {
        return chatMessages.map((chatMessage) => {
            <ChatMessage key={getKey(chatMessage)} message={chatMessage} />
        })
    }, [chatMessages]);

    return <div>
        {mappedMessages}
    </div>
})

聊天消息的类型定义如下：

interface IChatMessage {
    id: string; // 假设每个消息都生成uuid
    read: boolean;
    delivered: boolean;
    pending: boolean;
}

我同时使用react-native的FlatList，核心概念一致。为确保ChatMessage组件能重新渲染以反映当前状态（已读、已送达、编辑等），我并未仅使用id作为key，而是结合了这些状态值生成key。

当前实现可正常运行，但我更关注性能问题。假设状态中存在大量聊天消息，发送消息时的流程如下：

const sendChatMessage = async ({
    chatMessages,
    chatMessage,
    socket
}: {
    chatMessages: IChatMessage[];
    chatMessage: IChatMessage;
    socket: Socket
}) => {
    console.log(chatMessage); // { id: '<uuid>', delivered: false, read: false, pending: true }
    // 先更新UI显示"pending"状态图标
    setChatMessages([...chatMessages, chatMessage]);

    // 通过socket发送新消息
    socket.emit('send_message', { chatMessage });
}

我采用追加新消息的方式，认为这是最佳实践。随后会收到后端回复：

// 该事件用于标记新消息不再处于'pending'状态
socket.on('reply__send_message', { chatMessageId } => {
    const chatMessages = $chatMessages.getState();
    const chatMessage = chatMessages.find((chatMessage) => chatMessage.id === chatMessageId);

    setChatMessages(chatMessages.map((chatMessage) => {
        if (chatMessage.id === chatMessageId) {
            return {
                ...chatMessage,
                pending: false
            }
        }

        return chatMessage
    }));
})

此外，若目标用户在线，消息会被标记为已接收或已读：

socket.on('mark_message_as', { chatMessageId, markAs /* 'read' | 'received' */ } => {
    const chatMessages = $chatMessages.getState();
    const chatMessage = chatMessages.find((chatMessage) => chatMessage.id === chatMessageId);

    setChatMessages(chatMessages.map((chatMessage) => {
        if (chatMessage.id === chatMessageId) {
            return {
                ...chatMessage,
                [markAs === 'read' ? 'read' : 'received']: true,
            }
        }

        return chatMessage
    }));
})

请问我对chatMessages的状态更新是否符合最佳实践？这类频繁的通信与UI更新场景下，我是否还需进行其他优化？我已使用React.memo和key，但可能存在遗漏。

一、状态更新的最佳实践判断 #

你的状态更新方式整体符合最佳实践，但有几个细节可以优化：

• 追加新消息：用[...chatMessages, chatMessage]追加的不可变更新方式是正确的，能让React精准识别状态变化，避免意外副作用。
• 单个消息更新：通过map遍历生成新数组的方式是标准的不可变更新手段，但每次更新都调用$chatMessages.getState()后遍历整个数组，消息量大时会产生不必要的遍历开销。可以改用状态管理库的精准更新API（比如Effector的update方法），直接定位目标消息修改，减少遍历次数。
• 冗余代码：更新前调用的find是多余的，后续map中已经做了id判断，直接删掉即可。

二、关于Key的核心误区 #

你当前用id+状态值生成key的做法是错误的，会严重影响性能：

• React的key作用是唯一标识组件实例，让React复用已存在的组件，而非销毁重建。把状态值加入key后，只要消息的read/delivered/pending变化，key就会改变，React会直接销毁旧的ChatMessage组件并重新创建，完全违背了React.memo的优化初衷。
• 正确做法是仅用消息的唯一id作为key，因为id是永久唯一的。要让ChatMessage响应状态变化，只需保证：
  1. ChatMessage的React.memo默认浅比较props即可——你的不可变更新已经保证了修改后的消息是新对象，浅比较会触发组件重新渲染。
  2. 如果ChatMessage内部有复杂计算，用useMemo包裹计算逻辑，避免不必要的重计算。

三、其他性能优化建议 #

针对大量消息频繁更新的场景，还可以做以下优化：

• FlatList专属优化（React Native场景）：
  • 配置windowSize限制可见区域外的渲染组件数量；
  • 用initialNumToRender控制初始渲染的消息条数；
  • 开启removeClippedSubviews自动卸载不可见区域的重型组件（如带图片的消息）。
• 减少不必要重渲染：
  • 如果ChatMessage的props复杂，可以自定义React.memo的比较函数，只对比真正影响UI的字段（如read/delivered/pending/text），避免无关字段变化导致的重渲染。
• 批量更新状态：短时间内有多条消息状态更新时（如批量标记已读），使用状态管理库的批量更新API，减少React的重渲染次数。
• 虚拟列表升级：如果消息数量极大（上千条），可以改用react-window或react-virtualized这类专业虚拟列表库，仅渲染可见区域的消息，大幅降低内存占用和渲染耗时。

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