Reactjs 如何在react中呈现新消息而不重新呈现以前的消息？

我试图将form.js组件中的一条新消息添加到App.js中的消息数组中，并通过它进行映射以呈现该消息

但每次我添加一条新消息时，数组中的所有其他消息也会重新渲染，因此，它会产生一个性能问题，好像我要添加第100条消息，然后所有其他99条消息也会使用第100条消息重新渲染

不需要的输出照片：-

任何解决方案，如只有添加的消息应该得到渲染

App.js

const App = () => {
const [messageArr, setMessageArr] = useState([]);

const addMessage = (messageText) => {
    setMessageArr([...messageArr, messageText]);
};
return (
    <div>
        <ul>
            {messageArr.map(({ id, message }) => (
                <div key={id}>
                    <li>{message}</li>
                    {console.log(message)}
                </div>
            ))}
        </ul>
        <Form addMessage={addMessage} />
    </div>
)};

const Form = ({ addMessage }) => {
const [messageText, setMessageText] = useState('');

const handleSubmit = (e) => {
    e.preventDefault();
    const newMessage = {
        id: v4(),
        message: messageText
    } 
    addMessage(newMessage);
    setMessageText('');
};

return (
    <form onSubmit={handleSubmit}>
        <input
            type='text'
            value={messageText}
            onChange={(e) => setMessageText(e.target.value)}
        />
        <button>Add message</button>
    </form>
)};

const-App=（）=>{
const[messageArr，setMessageArr]=useState（[]）；
const addMessage=（messageText）=>{
setMessageArr（[…messageArr，messageText]）；
};
返回(

{messageArr.map（{id，message}）=>(
{message}
{console.log（消息）}
))}

)};

Form.js

const App = () => {
const [messageArr, setMessageArr] = useState([]);

const addMessage = (messageText) => {
    setMessageArr([...messageArr, messageText]);
};
return (
    <div>
        <ul>
            {messageArr.map(({ id, message }) => (
                <div key={id}>
                    <li>{message}</li>
                    {console.log(message)}
                </div>
            ))}
        </ul>
        <Form addMessage={addMessage} />
    </div>
)};

const Form = ({ addMessage }) => {
const [messageText, setMessageText] = useState('');

const handleSubmit = (e) => {
    e.preventDefault();
    const newMessage = {
        id: v4(),
        message: messageText
    } 
    addMessage(newMessage);
    setMessageText('');
};

return (
    <form onSubmit={handleSubmit}>
        <input
            type='text'
            value={messageText}
            onChange={(e) => setMessageText(e.target.value)}
        />
        <button>Add message</button>
    </form>
)};

const Form=（{addMessage}）=>{
const[messageText，setMessageText]=useState（“”）；
常量handleSubmit=（e）=>{
e、 预防默认值（）；
const newMessage={
id:v4（），
message:messageText
} 
addMessage（newMessage）；
setMessageText（“”）；
};
返回(
setMessageText（e.target.value）}
/>
添加消息
)};
因为
setMessageArr（[…messageArr，messageText]）
正在添加新消息，但没有删除以前的消息。您需要做的只是：
setMessageArr（[messageText]）

编辑：console.log（消息）显示多条消息，您正在正确设置值，但没有正确测试值。每当您要测试某个值（您希望看到的更新值）时，请始终使用useEffect测试更改，在您的情况下，如下所示：

useEffect(()=>{
console.log(messageArr)
  },[messageArr]);

不要在这里或那里对任何值执行console.log，而是将其放在useEffect中。这样做时，您将看到正确的结果，从App.js的div部分删除console.log，并按照我建议的方式进行测试。
v4（）函数的作用是什么？我认为问题在于它可能是一个随机值生成器，因此每次消息数据发生更改时，密钥都会更改，并使react重新呈现所有以前的消息

如果是这种情况，请尝试对密钥使用消息id，这样如果添加了新消息，react将识别以前消息的id，并且不会重新呈现以前呈现的消息

{messageArr.map((message) => (
  <div key={message.id}>
    <li key={message.id}>{message}</li>
  </div>
))}

{messageArr.map（（message）=>(
{message}
))}
这很有效

在React中，仅当子对象中的
shoudComponentUpdate
返回true（默认为true）时，当父对象重新呈现时，才会重新呈现子对象。（谈论以班级为基础的孩子）
因此，我建议：

为消息项创建单独的组件
执行
shouldComponentUpdate
，它将
nextProps
作为参数接收
比较
nextrops
：如果它们与当前的
props
相同，则返回
false
，否则返回
true
这样，只会呈现新消息
同样重要的是：不要忘记
键
，但我希望所有其他消息在我们发送消息时都像whats应用程序一样显示，然后所有上面的消息都没有丢失，它们仍然在那里，只是新消息被添加了下来。你可以发布一个你得到的不想要的输出的屏幕截图吗？我已经添加了不想要的输出，请查看并重试简单地做这个
{messageArr.map（（message）=>（{console.log（message）}
{message}
）}
好的，等等，我将共享代码沙盒链接为什么一个
键
=
v4（）
和另一个
键
=
v4
？
v4是一个函数吗
？是的，我已经编辑了关键部分，仍然呈现以前的消息SSO？你有什么反馈吗，Vijay？嘿，我已经更新了你说的话，但是，以前的消息仍然是用当前消息呈现的，v4（）每次都要生成一个新的id。你能把codesandbox链接发送到我可以看到代码的地方吗。我仍然无法解决它。