Question

我看过此链接，简要描述了Redux选择器模式的优点：

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

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

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

但是，由于状态每次发生变化时都会调用mapStateToProps，即使该变化与项目列表完全无关，在这种情况下也不会降低性能吗？不是最好在reducer内进行过滤？

谢谢。

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

如果您绑定的道具实际上并没有发生变化，而其他道具确实发生了更改，则确实会有浪费的重新渲染。在这种情况下，您可以做两件事-

使用shouldComponentUpdate - 您可以继续为您的组件实施shouldComponentUpdate生命周期方法。只需检查道具的更改并返回false，即可立即获得结果。
使用不可变数据结构- 您可以（并且应该在我看来）为您的应用程序使用不可变的日期结构。这不仅可以帮助您更好地了解您的应用，还可以进行调试。对您的本地州使用不可变的数据结构将允许高级备注模式和优化。查看Facebook的immutable-js，了解更多详细信息。
状态建模-这不是我们开发人员在编写超酷应用程序时真正考虑的事情，但这是在考虑性能方面的考虑值得考虑的事情。在实际数据更改中保持重新呈现本地信息是一项艰巨的任务，而诸如reselect，immutablejs和副作用管理库（如redux-saga和redux-thunk）之类的工具会有所帮助。

希望这对您有用！欢呼！

Redux选择器模式和性能

2 个答案: