Как избежать повторного рендеринга всего списка вместо добавления нового элемента в список DOM в реакции JS?

Question

Как и в демонстрации React, и в других примерах, я вижу людей, которые перезагружают данные состояния, если одна запись добавлена ​​или удалена. Это приводит к повторному отображению всего списка, а не просто добавлению последней записи или удалению выбранного из текущего дерева DOM.

Как это полезно? Или как я могу избежать этого случая.

UPDATE Ситуация: Facebook корм, вы продолжаете прокрутку корма, достигают около 5000 подающих статусов и многих других типов карт. Не только это, каждый фид состояния имеет свой собственный «список комментариев».

Каждую секунду 5-10 статусных карточек предварительно прикреплены к стене или добавляются в случае ленивой загрузки. то есть. каждую секунду вы повторно обрабатываете n + n * 0.5, где n может идти выше 5000 карт.

Кроме того, рассмотрите стоимость «перекраски», рендеринга петель.

Answer 1

Если вы дадите каждому элементу в списке уникальный (и детерминированный) key=uniqueValue prop, тогда React сохранит элементы списка, в которых ключ не изменился, что позволит избежать повторной обработки всего списка.

render() { 
    var comments = comments.map(function(comment){ 
    return (
     <Comment 
     key={comment.id} // This should be a unique, deterministic value 
     ... 
     /> 
    ); 
    }); 

    return(
    <div> 
     {comments} 
    </div> 
); 
} 

Подробнее в React Dynamic Children-х DOC раздел.