Question

我正在尝试将来自 form.js 组件的新消息添加到 App.js 中的消息数组中，并通过它映射以呈现该消息。

但是每次我添加一条新消息时，数组中的所有其他消息也会重新渲染，这些以前的消息应该在 UI 上，但不应重新渲染，由于这些，它产生了一个性能问题，好像我想添加第 100 条消息，然后所有其他 99 条消息也使用第 100 条消息重新呈现。

不需要的输出照片：-

As you can see the console image I mapped over through the messageArr array to render message 4 but all other messages 1, 2, 3 also getting re-render with message 4. I want other messages on UI but they should not get re-render with the current message which is message 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}>{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

你可以做一件事。

为单个消息创建一个新组件并将这些行放入该组件中

import React, { PureComponent } from "react";
import "./styles.css";

class Message extends PureComponent {
  render() {
    return <div>{this.props.message}</div>;
  }
}

export default Message;

然后在您的主文件中，您可以将返回更改为

return (
    <div>
        <ul>
            {messageArr.map(({ id, message }) => (
                <Message key={id} message={message} />
            ))}
        </ul>
        <Form addMessage={addMessage} />
    </div>
)

现在因为 Message 是一个纯组件，它不会重新渲染，直到它的 props 改变。因此，您的旧消息不会再次重新呈现，只会呈现新消息。

如何在不重新渲染 react.js 中的先前消息的情况下渲染新消息？

1 个答案: