基于mapStateToProps输出

时间:2016-07-04 17:32:21

标签: javascript reactjs redux

在基于React + Redux的项目中,我有一个connect() ed组件,它通过API提取检查用户权限。提取的权限存储在Redux存储中。

组件基本上看起来像<Can check="...">...</Can>,它与我们的API(通过Redux操作)对话以解决检查。如果授予了权限,则会呈现this.props.children,否则为null

为此,mapStateToProps()根据商店中的授权数据计算passes道具,并在<Can /> render()方法中进行检查。我使用ownProps参数mapStateToProps()来获取“要检查的内容”并计算passes标记。

有一些缓存正在进行,因此我不会重新获取每个组件装载,它基本上可以工作。但是,有时,当passes道具更新为true时,组件将不会重新渲染(但它会在导航后渲染 - 使用反应路由器 - 然后再返回,所以基本上如果组件重新启动-mounted)。

如果connect()的输出发生变化,mapStateToProps() ed组件会重新呈现吗? react-redux connect()的文档说明了这一点:

  

如果将ownProps指定为第二个参数,则其值将是传递给组件的props,并且只要组件接收到新的props,就会重新调用mapStateToProps。

这是否意味着传入ownProps会将渲染更改为仅在道具更改时重新渲染,还是以其他方式重新渲染?如何理解有关从mapStateToProps()进行记忆/返回功能的说明,或者甚至不相关?

谢谢

2 个答案:

答案 0 :(得分:11)

  

如果mapStateToProps()的输出发生变化,connect()ed组件是否会重新渲染? react-redux的connect()的文档说明了这一点:

函数的输出本身不能改变。首先必须触发此功能才能重新评估。

如果Redux状态发生变化,则会重新评估mapStateToProps

如果从父组件收到的道具非常不相等(已更改),则使用ownProps参数,mapStateToProps也会重新评估。

如果mapStateToProps返回的值与上次调用的值相等,则React Redux将跳过渲染。如果它返回浅不相等的值,则将重新呈现包装的组件。假设mapStateToProps本身是一个纯函数。

  

但是,有时候,当pass pass更新为true时,组件不会重新渲染

请创建一个复制此项目的最小项目,并提交相关代码示例的问题。

  

我如何理解关于memoization /从mapStateToProps()返回函数的注释,或者甚至不相关?

无关。

答案 1 :(得分:7)

这里要了解的几件事情:

  1. connect会浅显比较上一次mapState来电与当前mapState来电的输出。如果没有任何改变,它将不会重新渲染包装的组件。
  2. 默认情况下,connect仅在商店通知订阅者时才会运行mapState。但是,如果您的mapState函数被声明为使用两个参数,connect将传递包装组件的props作为第二个arg,允许您执行{{1}之类的操作}}。然后,只要传入的道具不同,它就会调用state.somePerItemData[ownProps.itemId],因为这可能会影响mapState的输出。
  3. Reselect的默认memoization仅为每个选择器函数保留一个缓存值。如果你有一个多次实例化的组件,并且所有实例共享相同的选择器函数实例,那么选择器的memoization可能不会按你想要的方式工作,因为每个组件实例可能用不同的输入调用它(例如他们自己的道具)。因此,作为一种非常高级的优化,您实际上可以将工厂函数作为mapState参数传递,这可以为每个组件实例创建唯一的选择器函数实例。
  4. 所有这一切,我担心我没有针对未更新组件的实际问题给出具体答案。我可能需要更详细地查看代码。