redux - Redux 选择器会导致不必要的组件渲染吗？

Question

从我从 Dan Abramov 的蛋头视频“javascript-redux-colocating-selectors-with-reducers”和他的一些推文中了解到，使用选择器将状态映射到 Prop 并删除此逻辑是一个很好的做法从 Component 中提取并将其放置在 Reducer(管理状态的位置)中。

尽管这一切都说得通，但它也会导致我的组件在每次将新状态添加到商店时呈现，即使仅更改了状态对象的非相关属性也是如此。有没有办法在不使用重新选择器的情况下克服这个问题，这对于更简单的情况可能有点矫枉过正？

Answer 1

如您所知，mapStateToProps每次更新您的商店时都会调用。

组件是否会重新渲染取决于什么 mapStateToProps返回。 (实际上，这取决于 mapStateToProps 和 mapDispatchToProps 返回的组合 props 对象。)

React Redux(提供 connect 函数的库)对返回的对象和最后返回的对象进行浅层相等性检查。如果相等性检查成功(即确定先前返回的对象等于下一个返回的对象)，则组件将不会重新渲染。如果检查失败，组件将重新渲染。

例如，假设您总是从 mapStateToProps 返回以下对象:

{
  items: [],
}

这个对象永远不会等于它自己( [] === [] 返回 false 因为它们是不同的数组)。因此，相等性检查将失败，组件将重新渲染。

然而，React Redux 执行更复杂的相等性检查(其 shallowEqual 函数的实现可以在 here 中找到)。

例如，即使 { a: 'b' } === { a: 'b'}返回 false (它们是不同的对象)， shallowEqual将他们视为平等。这是因为 shallowEqual将返回对象的每个键与先前返回的对象的每个键进行比较，但只有一级深。更多细节可以在我上面链接的实现中找到。

总结 ，如果您不希望组件重新渲染，则需要确保相等检查成功。

你可以:

使用 reducer 将返回的对象保存到状态

使用 Reselect

缓存结果

实现 shouldComponentUpdate手工在组件中

这些建议直接来自 Redux 的常见问题页面: https://redux.js.org/docs/faq/ReactRedux.html#react-rendering-too-often

您还可以确保您的 mapStateToProps函数返回被 shallowEqual 认为相等的对象(例如，没有数组的对象，只有一层深)。

为简单起见，我会选择重新选择。