React中如何渲染新消息而不重新渲染历史消息？

嘿，这个问题我之前也踩过坑！先帮你理清楚根源：每次调用setMessageArr更新消息数组时，App组件会触发重渲染，而你直接在App的map里写的消息元素，会跟着整个组件一起重新执行——哪怕是已经存在的旧消息，也会再跑一遍console.log，这就是你看到旧消息也被“重复渲染”的原因。

不过咱们可以通过两个简单的优化解决这个问题：

1. 把消息项封装成独立组件，用React.memo做渲染优化 #

React.memo是个高阶组件，它会浅对比组件的props，只有当props真正变化时才会重新渲染组件。咱们把单个消息抽成独立组件，旧消息的props没变化，自然就不会多余渲染了。

新增MessageItem.js组件 #

import React from 'react';

// 用React.memo包裹，实现props浅比较
const MessageItem = React.memo(({ message }) => {
  console.log(message); // 现在只有新增的消息才会触发这个日志
  return (
    <div>
      <li>{message}</li>
    </div>
  );
});

export default MessageItem;

更新App.js代码 #

import { useState } from 'react';
import Form from './Form';
import MessageItem from './MessageItem';

const App = () => { 
  const [messageArr, setMessageArr] = useState([]); 
  const addMessage = (messageText) => { 
    // 推荐用函数式更新，避免依赖外部的messageArr，状态更新更可靠
    setMessageArr(prevArr => [...prevArr, messageText]); 
  }; 
  return ( 
    <div> 
      <ul> 
        {messageArr.map(({ id, message }) => ( 
          <MessageItem key={id} message={message} />
        ))} 
      </ul> 
      <Form addMessage={addMessage} /> 
    </div> 
  )};

export default App;

2. 优化状态更新的写法 #

刚才在addMessage里用了setMessageArr(prevArr => [...prevArr, messageText])这种函数式更新，而不是直接用[...messageArr, messageText]。这么做的好处是，不管App组件因为什么原因重渲染，都能拿到最新的数组状态，避免出现状态更新丢失的问题，同时也能减少不必要的依赖。

验证效果 #

现在你再添加新消息时，控制台只会打印新增的那条消息，旧消息不会再触发console.log——这就说明旧消息没有被多余渲染，完美解决了性能问题！

内容的提问来源于stack exchange，提问作者vijay-navale