为什么推荐React的PureComponent使其所有孩子都"纯洁"

Question

看了官方的阵营文件,我已经遇到了这个关于PureComponent:

此外,React.PureComponent的shouldComponentUpdate()跳过整个组件子树的prop更新.确保所有儿童组件也"纯净".

为什么跳过道具更新整个子树的确意味着避免使用非纯组件？PureComponent的组件子树内的非纯组件的后果是什么(一般情况下以及未设计/应该对props更改的情况).

Answer 1

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

\n\n

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

\n\n

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

\n