Javascript 使用键React渲染映射元素

我要呈现一组消息：

此代码适用于：

render() {
    return this.props.messages.map((message) => (
        <Message
          key={message.id}
          message={message}
        />
    ));
}

render（）{
返回此.props.messages.map（（message）=>(
));
}

但是，如果我这样编写代码，有什么区别呢：

render() {
    return this.props.messages.map((message) => (
        <Message
          key={generateRandomNum()}
          message={message}
        />
    ));
}

render（）{
返回此.props.messages.map（（message）=>(
));
}

在这里，渲染时关键帧始终生成一个随机数。这两个版本都适用于我的应用程序

---

另外，如果我有1000条消息，那么如果在消息数组中添加了一条额外的消息-

this.props.messages

，是否所有消息都会重新提交当

组件

收到新的

道具

时，总是重新发送每条消息似乎是应用程序的一大负担，因为React会检查组件的id，然后检查组件的状态/道具是否已更改。因此，最好使用第一种情况，因为id是相同的。

尝试以下方法：

render() {
    const messages = this.props.messages.map((message, index) => (
        <Message
          key={`message-${index}`}
          message={message}
        />
    ));

    return (<div>{messages}</div>);
}

render（）{
const messages=this.props.messages.map（（消息，索引）=>(
));
返回（{messages}）；
}

---

React组件必须呈现单个顶级元素（在本例中为

div

）。使用

映射

索引还可以在数据更改时保持键的一致性，以防止其重新呈现所有内容。

不建议将索引用作正确的键，但这不仅仅是使用

索引

，而是使用

消息

组件特有的标识符来预先设置索引。避免使用索引的原因是为了防止多个组件使用同一个键，只要这是唯一一个使用

message

预先添加键的位置，就可以了。不，请小心，实际原因是可以修改数组。从我的文章中链接到：“让我解释一下，一个键是唯一用来识别DOM元素的东西。如果你把一个项目推到列表中或者删除中间的东西会发生什么？如果这个键与以前一样，那么就假定DOM元素代表了与以前相同的组件。但是这不再是真的。”预设“消息-”不会改变这个问题。啊。。。因此，在将ID作为道具传递之前，需要将ID添加到

props.messages

中的每条消息中，以保持一致性。每次运行

map

方法时唯一地生成一个ID将保证它们总是不同的，而这里的目标是确保只有新的ID是不同的。仅供参考（a）和（b）它仍然只是一个索引键，恰好前面有一个字符串。