如何在不重新呈现react中以前的消息的情况下呈现新消息

Question

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

但每次我添加新消息时，数组中的所有其他消息也会被重新渲染。因此，这会产生性能问题，就好像我想添加第100条消息，那么所有其他99条消息也会用第100条信息重新渲染一样。

不需要的输出照片：-

正如你所看到的，我通过messageArr数组映射到渲染消息4的控制台图像，但所有其他消息1、2、3也用消息4渲染。我希望UI上有其他消息，但它们不应该用当前消息(消息4 (重新渲染

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

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>
)};

Form.js

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>
)};

Answer 1

v4((函数的作用是什么？我认为问题可能是它是一个随机值生成器，所以每次消息数据发生变化时，密钥都会发生变化，并使react重新呈现之前的所有消息。

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

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

Answer 2

因为setMessageArr([...messageArr, messageText]);正在添加新消息，但没有删除以前的消息。您所需要做的就是：setMessageArr([messageText]);

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

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

不要在这里和那里为任何值执行console.log，而是将其放入useEffect中。当你这样做时，你会看到正确的结果，从App.js的div部分删除console.log并测试我建议你的方法。

Answer 3

这很管用！

在React中，仅当Child中的shoudComponentUpdate返回true(默认情况下为true(时，当Parent重新渲染时，才会重新渲染Child。(谈论基于班级的孩子(所以，我建议：

1. 为消息项创建一个单独的组件
2. 实现shouldComponentUpdate，它接收nextProps作为参数
3. 比较nextProps：如果与当前props相同，则返回false，否则返回true
4. 这样，只会呈现新消息

同样重要的是：不要忘记key