为什么建议React的PureComponent使其所有子级“纯净”

Question

Having read the official React documentation , I've came across this regarding PureComponent :

Furthermore, React.PureComponent's shouldComponentUpdate() skips prop updates for the whole component subtree. Make sure all the children components are also “pure”.

Why exactly does skipping props updates for the whole subtree means avoiding non-pure components? what would be the consequences of a non-pure component inside a PureComponent's component subtree (both in general and in the case when it's not designed/supposed to respond to props change).

Answer 1

A Pure Component for the same set of input props will give absolutely the same result, not just for itself but for the entire DOM tree. When you declare a PureComponent , not only do you need to think about props and state , but also context . PureComponents Block any context changes. Consider an example

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

React-router's Router will store current location in router props of context. And React-router's Switch will read it back and choose a Route.But since App is a very pure component, and will not react to context change in Router, because it not using that values and should ignore them. And hence when you have a PureComponent in place, you should think about not only the component but also its nested children. So essentially you would also keep all your children Pure.

Answer 2

Each prop should be immutable. It needs to easier debug. For example. You put array of users via props. But, one of components do: user.name = value. Children components may be much, and you will difficult understand, what is component updates the user?