Все элементы списка перерисовываются при каждом изменении массива данных, несмотря на уникальные ключи

Question

Я создаю какое-то приложение для чата. У меня есть контейнер «Чат», который отображает компонент «Сообщение» для каждого элемента, полученного от проповеди 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>

Как видите, я предоставляю уникальный ключ (message.itemId). Несмотря на это, каждый раз, когда элемент добавляется в массив (отправляя новое сообщение или получая сообщение), все компоненты сообщения перерисовываются (я вижу это, помещая console.log в рендер метод) .

Это становится очень медленным, после примерно скажем 100-150 пунктов. Я не React Pro, но, насколько я понимаю, вся идея уникального ключа состоит в том, чтобы предотвратить React от рендеринга элементов, которые не изменились.

Может ли кто-нибудь дать мне указание относительно того, что может быть не так? Я упомяну, что компонент Message на самом деле является оберткой для других простых функциональных компонентов.

Answer 1

Каждый раз при смене реквизита или состояния компонент будет перерисовываться. Чтобы остановить повторный рендеринг, используйте shouldComponentUpdate(nextProps, nextState).

Answer 2

Ваш компонент сообщения должен расширяться React.PureComponent. Он будет выполнять поверхностное сравнение каждого реквизита и состояния и будет выполнять рендеринг только в случае их изменения.

Ссылка на чистые компоненты: - https://reactjs.org/docs/react-api.html#reactpurecomponent

Я подготовил демо для этого: - https://codesandbox.io/s/34287lppzp.

Надеюсь, это поможет,

Ура !!

Answer 3

render вызывается для каждого из подкомпонентов, и это нормально, вы можете проверить инспектор элементов Chrome, чтобы увидеть, что происходит в DOM. взгляните на Здесь