Vị quan chức này Phản ứng tài liệu nhà nước rằng " React.PureComponent's shouldComponentUpdate()chỉ shallowly so sánh các đối tượng", và khuyên chống lại điều này nếu nhà nước là 'sâu'.

Vì điều này, có lý do nào khiến người ta thích React.PureComponentkhi tạo các thành phần React không?

Câu hỏi :

• Có bất kỳ tác động hiệu suất trong việc sử dụng React.Componentmà chúng tôi có thể xem xét đi React.PureComponent?
• Tôi đoán shouldComponentUpdate()của PureComponentThực hiện chỉ so sánh cạn. Nếu đây là trường hợp, phương pháp không thể nói được sử dụng để so sánh sâu hơn?
• "Hơn nữa, React.PureComponent's shouldComponentUpdate()bỏ qua chống đỡ bản cập nhật cho toàn bộ cây con thành phần" - Điều này nghĩa là những thay đổi prop được bỏ qua?

Câu hỏi phát sinh từ việc đọc vào blog vừa này , nếu nó giúp.

Sự khác biệt chính giữa React.PureComponentvà React.Componentlà PureComponentmột so sánh nông về thay đổi trạng thái. Nó có nghĩa là khi so sánh các giá trị vô hướng, nó so sánh các giá trị của chúng, nhưng khi so sánh các đối tượng thì nó chỉ so sánh các tham chiếu. Nó giúp cải thiện hiệu suất của ứng dụng.

Bạn nên đi React.PureComponentkhi bạn có thể đáp ứng bất kỳ điều kiện nào dưới đây.

• Bang / Đạo cụ nên là một đối tượng bất biến
• Bang / Đạo cụ không nên có thứ bậc
• Bạn nên gọi forceUpdatekhi dữ liệu thay đổi

Nếu bạn đang sử dụng, React.PureComponentbạn nên đảm bảo tất cả các thành phần con cũng nguyên chất.

Có bất kỳ tác động hiệu suất nào trong việc sử dụng React.component mà chúng tôi có thể xem xét khi sử dụng React.PureComponent không?

Có, nó sẽ tăng hiệu suất ứng dụng của bạn (vì so sánh nông)

Tôi đoán nênComponentUpdate () của Purecomponent chỉ thực hiện các so sánh nông. Nếu đây là trường hợp không thể sử dụng phương pháp đã nói để so sánh sâu hơn?

Bạn đã đoán đúng. Bạn có thể sử dụng nó nếu bạn đáp ứng bất kỳ điều kiện nào tôi đã đề cập ở trên.

"Hơn nữa, React.PureComponent's nênComponentUpdate () bỏ qua các bản cập nhật prop cho toàn bộ thành phần" - Điều này có nghĩa là thay đổi prop bị bỏ qua?

Có, thay đổi prop sẽ bị bỏ qua Nếu không thể tìm thấy sự khác biệt trong so sánh nông.

Componentvà PureComponentcó một sự khác biệt

PureComponenthoàn toàn giống như Componentngoại trừ việc nó xử lý shouldComponentUpdatephương thức cho bạn.

Khi đạo cụ hoặc trạng thái thay đổi, PureComponentsẽ làm một so sánh nông trên cả đạo cụ và trạng thái. Componentmặt khác sẽ không so sánh các đạo cụ và trạng thái hiện tại với hộp tiếp theo. Do đó, thành phần sẽ kết xuất lại theo mặc định bất cứ khi nào shouldComponentUpdateđược gọi.

So sánh nông

Khi so sánh các đạo cụ và trạng thái trước đó với trạng thái tiếp theo, một so sánh nông sẽ kiểm tra xem các nguyên hàm có cùng giá trị (ví dụ: 1 bằng 1 hoặc đúng bằng đúng) và các tham chiếu giống nhau giữa các giá trị javascript phức tạp hơn như các đối tượng và mảng.

Nguồn: https://codeburst.io/when-to-use-component-or-purecomponent-a60cfad01a81

Sự khác biệt chính, như tôi thấy, là một rerenders thành phần mỗi khi rerenders cha mẹ của nó, bất kể đạo cụ và trạng thái của thành phần đã thay đổi.

Mặt khác, một thành phần thuần túy sẽ không tái xuất hiện nếu các rerender mẹ của nó, trừ khi các đạo cụ (hoặc trạng thái) của thành phần thuần túy đã thay đổi.

Ví dụ: giả sử rằng chúng ta có một cây thành phần với hệ thống phân cấp ba cấp: cha mẹ, con cái và cháu.

Khi đạo cụ của cha mẹ được thay đổi theo cách mà đạo cụ chỉ có một đứa trẻ được thay đổi, thì:

• nếu tất cả các thành phần là các thành phần thông thường, thì toàn bộ cây thành phần sẽ chạy lại
• nếu tất cả con cháu là thành phần thuần túy, thì chỉ có một đứa trẻ sẽ tái xuất hiện, và một hoặc tất cả các cháu của nó, tùy thuộc vào việc đạo cụ của chúng có bị thay đổi hay không. Nếu có nhiều thành phần trong cây thành phần này, nó có thể có nghĩa là tăng hiệu suất đáng kể.

Tuy nhiên, đôi khi, sử dụng các thành phần tinh khiết sẽ không có bất kỳ tác động nào. Tôi đã gặp trường hợp như vậy khi phụ huynh nhận được đạo cụ từ cửa hàng redux và cần thực hiện một phép tính phức tạp về đạo cụ cho con. Cha mẹ đã sử dụng một danh sách phẳng để kết xuất con của nó.

Kết quả là mỗi khi có một thay đổi nhỏ trong cửa hàng redux, toàn bộ mảng danh sách phẳng dữ liệu của trẻ em đã được tính toán lại. Điều này có nghĩa là đối với mọi thành phần trong cây, đạo cụ là các đối tượng mới, ngay cả khi các giá trị không thay đổi.

Trong trường hợp này, các thành phần thuần túy không giúp ích gì và chỉ có thể đạt được hiệu suất tăng bằng cách sử dụng các thành phần thông thường và kiểm tra ở trẻ em, trong ShouldComponentUpdate, nếu cần phải đăng ký lại.