Wydajność przy podświetlaniu pozycji na liście przy użyciu React

Question

Mam dużą listę, powiedzmy 3k członków. Mam komponent, który renderuje tę listę i komponent dla każdego elementu listy. W zewnętrznym komponentem mamy kod tak:

const list = _.map(this.props.items, (item) => { 
    return <ListItem key={item.key} {...item} /> 
}); 

a potem w naszej JSX umieszczamy listę:

<div> 
    <h3>Check out my sweet list </h3> 
    { list } 
</div> 

Tu właśnie sęk: Chcę pokazać użytkownikowi po kliknięciu na elemencie że przedmiot został wybrany. Tak więc w moim komponencie ListItem mam kod, który w zależności od tego, czy dany element ma właściwość selected, podświetla się. Jak zatrzymać React przed ponownym utworzeniem całej listy, gdy zmieni się tylko wybrana właściwość pojedynczego elementu? Jestem pewien, że muszę jakoś zrestrukturyzować mój kod, ale nie jestem pewien, jaka struktura rozwiąże ten problem. Chętnie odpowiem na wszystkie pytania i dziękuję z góry!

Uwagi:

• Nie mówię renderowania 3k pozycji na liście jest dobre, po prostu uwierzyć ten powinien być, co do zasady, możliwe do zrobienia z zareagować.
• Lista nie jest dosłownie ponownie renderowana na rzeczywistej domenie, ale domena wirtualna wykonuje pracę polegającą na porównywaniu wszystkiego, co zajmuje dużo czasu.

Answer 1

Okej, wymyśliłem to. Pomyślne wdrożenie shouldComponentUpdate dla każdego pojedynczego elementu powoduje ogromny wzrost wydajności. Nie udało mi się tego zrobić z prostego powodu.

shouldComponentUpdate(nextProps) { 
    return !_.isEqual(nextProps, this.props); 
} 

Jednak ... robiłem to na moim deklaracji poszczególnych elementów:

onClick={this.handleItemClick.bind(this, item.key)} 

co oznacza, że ​​this.props.onClick === nextProps.onClick zawsze return false, więc każdy pojedynczy element zawsze deklarują się jako wymagające być ponowny zwrot. Po wprowadzeniu niestandardowego czeku jest teraz niezwykle szybki!