用键反应渲染映射元素[重复]

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

这里，key 在渲染时总是生成一个随机数。这两个版本都适用于我的应用程序。

另外，如果我有 1000 条消息，如果将其他消息添加到消息数组 - this.props.messages，是否会重新呈现所有消息？ ---- 当component 收到新的props 时，始终重新呈现每条消息似乎对应用程序来说是一个沉重的负担。

Answer 1

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

Answer 2

试试这个：

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

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

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