如何使用 React.memo 在向组件添加新元素时不重新渲染？答案

【问题标题】：How to use React.memo to not re render when a new element is added to the component?如何使用 React.memo 在向组件添加新元素时不重新渲染？
【发布时间】：2023-02-26 12:02:22
【问题描述】：

我有一个呈现文本消息列表的父组件。在我使用 React.memo 之前，每次我输入一个密钥时，所有消息组件都会重新呈现。

我用React.memo后，解决了这个问题。

但是，当我按 enter 输入新消息时，所有以前的消息组件都会重新呈现。

function MsgList({ api_res}) {
  return api_res.map((msg, index) => {

    return (
      <MemoMsg
        key={msg.timestamp}
        // other args
      />
    );
  });
}

const MemoMsgList = React.memo(MsgList);

所以这个想法是，每当输入一条新消息时，它都会使用以前的消息并且只需要计算这条消息。

如何才能做到这一点？

【问题讨论】：

新消息如何进入列表？来自 API 调用或其他？

标签： javascript reactjs frontend

【解决方案1】：

React.memo 用于不必要的渲染。在 prop 或 state 发生变化时重新渲染组件是 React 的核心概念。

但在你的情况下，因为你正在使用 api_res.map 并且已经有 key 道具，那些 MemoMsg 组件不应该重新渲染，他们应该 be reconciliated.

检查msg.timestamp，也许它没有返回一个稳定的密钥。

如果来自MemoMsg 的其他内容导致重新渲染，请用React.Memo 包裹MemoMsg 组件

【讨论】：