使用键

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？ ----当component收到新的props时，应用程序总是重新呈现每条消息似乎是一个沉重的负担。

Answer 1

它将在第二种情况下重新渲染，因为React检查组件的id，然后检查其状态/ 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索引还可以在数据更改时保持密钥一致，以防止重新呈现所有内容。