Tại sao Phản ứng của PureComponent được khuyến khích để có tất cả các con của nó "tinh khiết"

Question

Sau khi đọc chính thức React documentation, tôi đã tình cờ gặp this về PureComponent:

Hơn nữa, React.PureComponent của shouldComponentUpdate() bỏ qua prop cập nhật cho toàn bộ thành phần subtree. Hãy chắc chắn rằng tất cả các trẻ em thành phần cũng là "tinh khiết".

Tại sao chính xác bỏ qua các bản cập nhật đạo cụ cho toàn bộ cây con có nghĩa là tránh các thành phần không thuần khiết? những gì sẽ là hậu quả của một thành phần không tinh khiết bên trong một thành phần của PureComponent subtree (cả nói chung và trong trường hợp khi nó không được thiết kế/nghĩa vụ phải trả lời thay đổi đạo cụ).

Answer 1

Thành phần thuần túy cho cùng một bộ đạo cụ nhập liệu sẽ cho kết quả tương tự, không chỉ cho chính nó mà còn cho toàn bộ cây DOM. Khi bạn khai báo số PureComponent, bạn không chỉ cần suy nghĩ về đạo cụ và state, mà còn là context. PureComponents Chặn bất kỳ thay đổi ngữ cảnh nào. Hãy xem xét ví dụ

<MyApp>  
<Router> // react-router. 
    <App> // A PureComponent 
    <Switch> // react-router Switch 
    <Route ....> 
    </Switch> 
    </App> 
</Router> 
</MyApp> 

Bộ định tuyến của bộ định tuyến sẽ lưu trữ vị trí hiện tại trong đạo cụ bộ định tuyến của bộ định tuyến. Và React-router’s Switch sẽ đọc lại và chọn Route.But vì App là một thành phần rất tinh khiết và sẽ không phản ứng với context thay đổi trong Bộ định tuyến, vì giá trị đó và nên bỏ qua chúng. Và do đó khi bạn có một PureComponent tại chỗ, bạn nên suy nghĩ về không chỉ các thành phần mà còn là những đứa trẻ lồng nhau của nó. Vì vậy, về cơ bản bạn cũng sẽ giữ tất cả trẻ em của bạn Pure.

Answer 2

Từng ngăn phải không thay đổi. Nó cần phải gỡ lỗi dễ dàng hơn. Ví dụ. Bạn đặt mảng người dùng thông qua đạo cụ. Tuy nhiên, một trong các thành phần làm: user.name = value. Các thành phần của trẻ có thể nhiều, và bạn sẽ khó hiểu, thành phần nào cập nhật cho người dùng?