Javascript 对数据数组的每次更改都会重新呈现所有列表元素，尽管键是唯一的

我正在构建一些聊天应用程序。我有一个“聊天”容器，它为从Redux道具接收到的每个元素呈现一个“消息”组件。看起来很简单

这是呈现消息组件的JSX：

<div className="messages" >
                    <ul  >
                        {this.props.items.length > 0 && <i style={{ float: 'right' }} onClick={this.clearItems} data-toggle="tooltip" title="Clear history" className="fa fa-trash hover"></i>}

                        {this.props.items.map((message) => {

                            return <Message
                                showCheckBox={this.state.bulkOperationActive}
                                onBulkOperationOn={this.bulkOperationOn}
                                onDelete={this.deleteItems}
                                onItemCheck={this.onItemCheck}
                                checked={this.state.selectedItems.hasOwnProperty(message.itemId)}
                                key={message.itemId}
                                displayName={this.getDisplayName(message)}
                                time={this.getTime(message.moment)}
                                message={message}
                            />


                        })}
                    </ul>

                </div>

{this.props.items.length>0&&}
{this.props.items.map（（消息）=>{
返回
})}

如您所见，我提供了一个唯一的密钥（message.itemId）。尽管如此，每次将项目添加到数组中（通过提交新消息或接收消息），所有消息组件都会重新呈现（我通过在呈现方法中放置console.log来查看）

这变得非常缓慢，大约100-150件物品之后。我不是React pro，但据我所知，unique key的整个理念是防止React重新渲染未更改的项目

---

有人能告诉我怎么回事吗？我将提到消息组件实际上是其他简单功能组件的包装器

为每个子组件调用render，这是正常的，您可以检查Chrome元素检查器以查看DOM上发生的情况。每次更改道具或状态时，请查看组件将重新渲染的情况。

---

要停止重新渲染，请使用

shouldComponentUpdate（nextrops，nextState）

您的消息组件应该扩展

React.PureComponent

。它将对每个道具和状态进行粗略比较，并且仅当它们发生更改时才会重新渲染

链接到纯组件：-

我已经为此准备了一个演示：-

希望这有帮助

---

干杯

天哪！它是有效的：谢谢，我一定会学习这个主题，去理解“正常”成分和纯成分之间的区别。然而，我要提到的是，这里仍然有些奇怪：在dev工具中查看React虚拟DOM时，我没有看到任何带有“key”的元素（包括纯组件和普通组件）。好像我的key prop不存在（但我没有得到任何警告）是什么原因造成的？你不会在React Dev工具中看到“key”作为prop，因为它是在内部使用的。传入key的值永远不会在另一个组件中显示为{this.props.key}，因为它不存在。是的，但是消息组件的道具没有改变。