Javascript 如何使用React设置列表中多个文本字段的状态？

我试图在屏幕上呈现许多小文本字段（可能是200+左右）。代码如下：

const textAreaHandler = (message, textArea) => {
    let copiedMessages = [...messages];
    const index = copiedMessages.indexOf(message);
    copiedMessages[index].text = textArea.target.value;
    setMessages(copiedMessages);
};

<ListGroup className="m-3">
    {messages.map(message =>
        <div 
            className="d-flex flex-column align-items-center"
        >
            <div className="d-flex mb-4" key={tweet.id_str}>
                <div className="d-flex flex-column message-view-container">
                    <Select
                        placeholder="Tags"
                        isMulti
                        name="tags"
                        options={options}
                        defaultValue={[options[0]]}
                        className="basic-multi-select"
                        classNamePrefix="select"
                    />
                    <Form.Control
                        style={{
                            width:350,
                            height:220,
                            resize:'none'
                        }}
                        className="mb-1"
                        as="textarea"
                        defaultValue={message.text}
                        onChange={
                            textArea => textAreaHandler(message, textArea)
                        }
                    />
                    <Button>Add</Button>
                </div>
            </div>
        </div>
    )}
</ListGroup>

const textAreaHandler=（消息，textArea）=>{
让copiedMessages=[…消息]；
const index=copiedMessages.indexOf（消息）；
copiedMessages[index].text=textArea.target.value；
设置消息（复制消息）；
};
{messages.map（message=>
textAreaHandler（消息，textArea）
}
/>
添加
)}

触发onChange时，我正在更新模型的文本。问题是它会导致列表中的每个孩子重新渲染并冻结应用程序。如何在不引起冻结的情况下更新模型中的文本