如何正确使用 React.memo 防止子组件不必要的重渲染-js教程-PHP中文网

如何正确使用 React.memo 防止子组件不必要的重渲染

本文详解为何 React.memo 失效的根本原因——不稳定 key 导致组件频繁卸载重挂载，并提供可落地的修复方案，包括 key 选择原则、useMemo 正确用法及 Video 组件优化实践。

本文详解为何 `react.memo` 失效的根本原因——不稳定 key 导致组件频繁卸载重挂载，并提供可落地的修复方案，包括 key 选择原则、usememo 正确用法及 video 组件优化实践。

在 React 应用中，React.memo 是防止函数组件无谓重渲染的关键工具，但其生效前提是父组件传递给子组件的 props 确实未发生引用变化，且子组件自身被稳定复用（而非反复销毁重建）。你遇到的问题——Video 组件在无关状态变更时仍触发 useEffect(() => { console.log('RE-RENDERED') }, []) 日志——并非 memo 失效，而是组件被强制卸载并重新挂载：useEffect 的空依赖数组只在挂载时执行，日志出现即表明 Video 实例被销毁重建，这与 memo 无关，而源于更底层的 key 机制。

? 根本原因：key 不稳定导致组件“假重渲染”

你在 Chat 组件中这样渲染消息列表：

{Object.values(chatMessages).map((messageObj, index) => (
  <chatmessage key="{index}" messageobj="{messageObj}"></chatmessage>
))}

⚠️ 表面看 key={index} 似乎合理，但存在严重隐患：当 chatMessages 数组内容动态增删（如新消息插入、旧消息删除）时，index 会整体偏移。例如，原第 0 条消息因新消息插入变为第 1 条，React 将认为“原 key=0 的组件已消失”，而“新 key=0 的组件需创建”，导致所有后续 ChatMessage 实例被销毁重建——即使 messageObj 内容未变，Video 也会随之卸载重挂载。

更危险的是，若代码中曾误用 key={Math.random()} 或 key={Date.now()} 等动态值，每次渲染都会生成新 key，等同于强制所有子组件重挂载，memo 完全失效。

✅ 正确解决方案：使用稳定唯一 key

为每个消息分配业务上稳定、唯一、不可变的标识符作为 key。优先级如下：

React Flow Implementation

使用 @xyflow/react正确实现 React Flow 节点式用户界面。适用于构建流程图、图表、可视化编辑器或节点式应用程序...

下载

首选：消息 ID（推荐）
若 messageObj 包含唯一 ID（如 messageObj.id），直接使用：

{Object.values(chatMessages).map((messageObj) => (
  <chatmessage key="{messageObj.id}" messageobj="{messageObj}"></chatmessage>
))}

次选：组合唯一键（如时间戳+发送者）
若无 ID，可用不可变字段组合（确保全局唯一）：
```
<chatmessage key="{`${messageObj.timestamp}-${messageObj.sentBy}`}" messageobj="{messageObj}"></chatmessage>
```
仅限静态列表：index（不推荐用于动态列表）
仅当 chatMessages 数组绝对不增删、仅更新属性时才可用 index。你的聊天场景显然不符合此条件。

?️ 同时优化 ChatMessage 和 Video 组件

1. 移除无效的 useMemo

当前写法：

const newMessageObj = useMemo(() => { return messageObj });

这是冗余操作——messageObj 本身是引用类型，useMemo 未做任何计算或依赖过滤，反而增加开销。应直接使用 messageObj。

2. 修正 Video 组件的 memo 逻辑

React.memo 默认浅比较 props，需确保 messageObject.url 变化时才更新。当前实现正确，但建议显式定义比较函数增强可读性：

// Video.jsx
import { memo, useEffect } from 'react';

const Video = ({ messageObject }) => {
  useEffect(() => {
    console.log('Video mounted or url changed');
  }, [messageObject.url]); // ? 关键：监听 url 变化，而非空依赖

  return (
    <video controls><source src="%7BmessageObject.url%7D" type="video/mp4"></source></video>
  );
};

// 仅当 messageObject.url 改变时才重渲染
export default memo(Video, (prevProps, nextProps) => 
  prevProps.messageObject.url === nextProps.messageObject.url
);

3. 确保 chatMessages 的 selector 高效

你使用的 Redux selector：

const chatMessages = useSelector((state) => state.messages.messagesData[chatId]) || {};

✅ 正确：直接取值，无额外计算。
⚠️ 注意：确保 state.messages.messagesData 是普通对象（非 Proxy/Immutable），否则浅比较可能失效。若用 Immutable.js，需配合 reselect 的 createSelector 缓存。

✅ 最终修复后的关键代码

// Chat.jsx
{Object.values(chatMessages).map((messageObj) => (
  <chatmessage key="{messageObj.id}" id messageobj="{messageObj}"></chatmessage>
))}

// ChatMessage.jsx
const ChatMessage = ({ messageObj }) => {
  if (messageObj.admin) return null;

  const sentById = messageObj.sentBy; // ✅ 直接使用，无需 useMemo
  const sentByUser = sentById === userData.userId 
    ? userData 
    : storedUsers?.[sentById] || newChatData?.otherUsersData;

  return (
    <div classname="d-flex flex-row" style="{{" margintop:>
      <video messageobject="{messageObj}"></video> {/* ✅ props 引用稳定 */}
    </div>
  );
};

// Video.jsx（如上优化版）
export default memo(Video, (prev, next) => 
  prev.messageObject.url === next.messageObject.url
);