reactjs - 为什么React的PureComponent建议其所有子组件都是 "pure"

Question

已阅读官方React documentation ，我遇到过this关于PureComponent:

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

为什么跳过整个子树的 props 更新意味着避免非纯组件？ PureComponent 的组件子树中的非纯组件会产生什么后果(无论是一般情况还是在它未设计/不应该响应 props 更改的情况下)。

Answer 1

同一组输入属性的纯组件将给出完全相同的结果，不仅对于它本身，而且对于整个 DOM 树。当您声明 PureComponent 时，您不仅需要考虑 props 和 state，还需要考虑 context。 PureComponents 阻止任何上下文更改。考虑一个例子

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

React-router 的 Router 会将当前位置存储在上下文的 router props 中。 React-router 的 Switch 会读回它并选择一个 Route。但是由于 App 是一个非常纯粹的组件，并且 不会对 context 使用react路由器中的更改，因为它不使用该值并且应该忽略它们。因此，当您拥有 PureComponent 时，您不仅应该考虑该组件，还应该考虑其嵌套的子组件。所以本质上你也会让你所有的 child 保持纯洁。