当父级重新渲染时，连接的 React 组件不必要地重新渲染答案

【问题标题】：Connected React component unnecessarily re-renders when parent re-renders当父级重新渲染时，连接的 React 组件不必要地重新渲染
【发布时间】：2019-11-19 21:53:25
【问题描述】：

我有一个通过实现 mapStateToProps 连接到 redux 存储的 React 组件。 React-redux connect 实现了一个浅相等的 shouldComponentUpdate ，如果 props 没有改变（基于引用），它应该防止重新渲染。但是，除非我使我的组件显式纯净（使用 PureComponent），否则我的组件会在其父组件重新呈现时重新呈现。这不应该是必需的，因为 connect 应该像 PureComponent 一样实现了 shouldComponentUpdate 。有什么理由说明为什么会发生这种情况？具体来说，connect 的实现与 PureComponent 有何不同？连接不让它的包装组件纯净吗？

【问题讨论】：

请提供您的代码。 Codesandbox 可能会有所帮助:)

标签： javascript reactjs redux react-redux

【解决方案1】：

connect 应该像 PureComponent 一样实现 shouldComponentUpdate

connect 函数不这样做。
PureComponent 为您提供shouldComponentUpdate 函数，它是一个占位符，您可以在其中放置您的性能调整代码。

coonect 采用不同的方法并提供 4 个函数/占位符代替。您可以使用全部四个或部分或不使用来微调性能。函数调用：
areStatesEqual
areStatePropsEqual
areOwnPropsEqual
areMergedPropsEqual

connect 不会使其包装的组件成为纯组件吗？

它让您可以选择使用上述功能。您可以模仿shouldComponentUpdate 所做的浅层相等检查。

【讨论】：

你提到的 connect 实现的函数本质上与使组件纯粹相同 - PureComponent 在 shouldComponentUpdate 中实现了 props 的浅相等测试，就像你列出的函数（ areStatesEqual、areStatePropsEqual、areOwnPropsEqual、areMergedPropsEqual）
此外-我相信connect默认实现了上述功能。
是的，您可以覆盖默认实现。例如，areStatesEqual 使用严格相等运算符检查整个状态是否发生变化，这与 shouldComponentUpdate 使用浅相等检查不同。
areStatesEqual 的参数是组件状态吗？
areStatesEqual 获取新旧（传入）Redux 状态树，并确定状态树更改是否足以调用mapStateToProps