Hiệu suất khi tô sáng mục trong danh sách với React

Question

Tôi có một danh sách lớn, giả sử 3k thành viên. Tôi có một thành phần hiển thị danh sách này và một thành phần cho từng mục danh sách. Trong thành phần bên ngoài, chúng tôi có mã như thế này:

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

Và sau đó trong JSX chúng tôi đặt danh sách:

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

Đây là chà: Tôi muốn hiển thị cho người dùng khi họ bấm vào một mục rằng mục đã được chọn. Vì vậy, trong thành phần ListItem của tôi, tôi có mã dựa trên việc một mục riêng lẻ có thuộc tính selected hay không, tự làm nổi bật. Làm cách nào để dừng React khỏi hiển thị lại toàn bộ danh sách, khi chỉ có thuộc tính được chọn trên một mục duy nhất thay đổi? Tôi chắc rằng tôi cần phải cấu trúc lại mã của mình bằng cách nào đó, nhưng tôi không chắc cấu trúc nào sẽ giải quyết vấn đề này. Hạnh phúc để trả lời bất kỳ và tất cả các câu hỏi và cảm ơn trước!

Ghi chú:

• Tôi không nói rằng render 3k mục trong một danh sách được tốt, chỉ cần tin này nên được, về nguyên tắc, có thể làm gì với phản ứng.
• Danh sách không được hiển thị lại trên thực tế, nhưng nhà ảo đang thực hiện công việc so sánh mọi thứ và mất rất nhiều thời gian.

Answer 1

OK tôi đã tìm ra. Thực hiện thành công shouldComponentUpdate trên từng mục riêng lẻ sẽ mang lại hiệu suất lớn. Tôi đã không làm điều này vì một lý do đơn giản.

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

Tuy nhiên ... Tôi đã làm điều này trên tờ khai của tôi về từng hạng mục:

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

Mà có nghĩa là this.props.onClick === nextProps.onClick sẽ luôn luôn trả về false, vì vậy tất cả các mục duy nhất sẽ luôn luôn tuyên bố mình là cần phải có rerendered. Sau khi thực hiện một kiểm tra tùy chỉnh, nó cực kỳ nhanh chóng ngay bây giờ!