javascript - 尽管有唯一键，但每次更改数据数组时都会重新呈现所有列表元素

Question

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

这是呈现消息组件的 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>

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

这变得非常慢，大约在 100-150 个项目之后。我不是 React 专家，但据我了解，唯一键的整个想法是防止 React 重新渲染未更改的项目。

谁能给我一个方向，关于什么可能是错的？我会提到 Message 组件实际上是其他简单功能组件的包装器。

Answer 1

您的消息组件应该扩展 React.PureComponent。它将对每个 prop 和 state 进行浅比较，并且只有在它们发生变化时才会重新渲染。

纯组件链接:- https://reactjs.org/docs/react-api.html#reactpurecomponent

我已经为此准备了一个演示:- https://codesandbox.io/s/34287lppzp .

希望对您有所帮助，

干杯!!