Pure ReactJS Components

Question

Dan Abramov says

... a component is clean if it is guaranteed to return the same result with the same details and condition.

Therefore, if the component is provided with the same details, the same output will always be returned. This is clear.

Then he says

pure components ... do not rely on deep mutations in requisites or states, therefore their rendering performance can be optimized by fine comparison in their hook shouldComponentUpdate()

But this means that I can provide a clean component with the same props, but with a difference deeper inside the specified props, and the component will display the same, but for different (although deep differences) props. This means that this restriction does not apply.

I declare the component as extends PureComponentreally saying ReactJS "I know what I am doing. I guarantee that I use an immutable state. Therefore, you only need to perform small comparisons of details in shouldComponentUpdate"?

Finally, it PureComponentprovides a default method by default shouldComponentUpdate- apparently this can be overridden by what you want (even a deep comparison)?

Answer 1

Declares the component as an extension of PureComponent, really saying ReactJS "I know what I am doing. I guarantee that I use an immutable state. Therefore, you only need to perform the small details in shouldComponentUpdate"?

Yes

, PureComponents toComponentUpdate - -, , ( )?

. React , . Component .

Answer 2

, Pure Render Checks https://github.com/vasanthk/react-bits/blob/master/gotchas/01.pure-render-checks.md

:

https://flexport.engineering/optimizing-react-rendering-part-1-9634469dca02 https://flexport.engineering/optimizing-react-rendering-part-2-7b2e9a9ea21f https://flexport.engineering/ending-the-debate-on-inline-functions-in-react-8c03fabd144