Question

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

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

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

这变得非常缓慢，大约要说100-150个项目之后。我不是React专业人员，但是据我了解，唯一键的整个想法是防止React重新呈现未更改的项目。

有人可能给我一个方向，以解决可能出什么问题？我将提到Message组件实际上是其他简单功能组件的包装。

Answer 1

分别为每个子组件提供

render调用，这很正常，您可以检查Chrome元素检查器以查看DOM发生了什么。看看Here

Answer 2

您的消息组件应扩展 React.PureComponent 。它将对每个属性和状态进行浅层比较，并且仅在它们更改时才会重新呈现。

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

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

希望这会有所帮助，

干杯！

Answer 3

每次道具或状态更改时，组件都会重新渲染。要停止重新渲染，请使用shouldComponentUpdate(nextProps, nextState)。

尽管有唯一键，但每次对数据数组进行更改时，所有列表元素都将重新呈现

3 个答案: