使用键[duplicate]反应渲染映射元素

Question

我想呈现一个消息数组：

此代码适用于：

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

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

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

这里，键在呈现时总是生成随机数。两个版本都适用于我的应用程序。

另外，如果我有1000条消息，那么如果在消息数组中添加了一条额外的消息-this.props.messages，是否所有消息都会重新提交当组件收到新的道具时，总是重新发布每条消息，这似乎是应用程序的一大负担。

Answer 1

试试这个：

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

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

React组件必须呈现单个顶级元素（在本例中为div）。使用map索引还可以在数据更改时保持键的一致性，以防止它重新呈现所有内容。

Answer 2

它将在第二种情况下重新渲染，因为React检查组件的id，然后检查它们的状态/道具是否发生了变化。所以你最好使用第一种情况，因为id是一样的。