Redux 选择器模式和性能

Question

我遇到了这个链接，它简要描述了 Redux 选择器模式的优点：

https://gist.github.com/abhiaiyer91/aaf6e325cf7fc5fd5ebc70192a1fa170

它们提供了一个在mapStateToProps中调用过滤的示例：

function mapStateToProps(state) {
return {
incompleteItems: getIncompleteItems(state)
}
}

但是，由于每当状态更改时都会调用mapStateToProps，即使更改与项目列表完全无关，在这种情况下不会有性能损失吗？ 在减速器内部进行过滤不是最好吗？

谢谢。

Answer 1

上面的代码片段只是提到你应该将mapStateToProps函数中的"计算"提取到另一个函数中。

另一个函数可以很容易地测试，并且是您提到的不在每个周期重新计算的最佳部分。

Now we can reuse this logic across many components mapping this exact state! We can unit test it as well! More importantly we can now memoize this state with reselect

在这种情况下，您可以使用reselect包

https://github.com/reactjs/reselect

这将负责重新计算或 n

Answer 2

如果你绑定到一个实际上没有改变的道具，但你的其他道具改变了，那么确实会浪费重新渲染。在这种情况下，您可以做两件事 -

1. 使用应该组件更新- 您可以继续为组件实现 shouldComponentUpdate 生命周期方法。只需检查道具的更改并返回 false，就会立即获得结果。

2. 使用不可变的数据结构- 您可以(并且在我看来应该(为您的应用程序使用不可变的日期结构。这不仅可以让你更好地推理你的应用，还可以进行调试。对本地状态使用不可变的数据结构将允许高级记忆模式和优化。 查看 immutable-js by facebook 了解更多详情。

3. 状态建模- 这不是我们开发人员在编写超酷应用程序时经常考虑的事情，但在向性能方向思考时，这是一件值得考虑的事情。将重新渲染保留在实际数据更改的本地是一项痛苦的任务，而诸如reselect，immutablejs和副作用管理库(如redux-saga和redux-thunk(之类的工具会有很大帮助。

希望这对你有用！欢呼！😇