React.Component vs React.PureComponent

Question

Trạng thái chính thức React docs rằng "React.PureComponent 'shouldComponentUpdate() chỉ nông so sánh các đối tượng" và khuyên chống lại trạng thái này nếu trạng thái "sâu".

Với điều này, có lý do nào tại sao một người nên thích React.PureComponent khi tạo thành phần React không?

Câu hỏi:

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

Câu hỏi phát sinh khi đọc vào điều này medium blog, nếu có ích.

Answer 1

Sự khác biệt chính giữa React.PureComponent và React.Component là PureComponent thực hiện 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, 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 truy cập React.PureComponent khi bạn có thể đáp ứng bất kỳ điều kiện nào dưới đây.

• Tiểu bang/Props phải là đối tượng bất biến
• Tiểu bang/Props không nên có một hệ thống phân cấp
• Bạn nên gọi forceUpdate khi dữ liệu thay đổi

Nếu bạn đang sử dụng React.PureComponent bạn nên chắc chắn tất cả các thành phần con cũng tinh khiết.

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

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

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

Bạn đã đoán chính xác. 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 của shouldComponentUpdate() bỏ qua prop cập nhật cho cây con thành phần toàn bộ" - có nghĩa này mà chống đỡ thay đổi được bỏ qua

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

?.