在基于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()
进行记忆/返回功能的说明,或者甚至不相关?
谢谢
答案 0 :(得分:11)
如果mapStateToProps()的输出发生变化,connect()ed组件是否会重新渲染? react-redux的connect()的文档说明了这一点:
函数的输出本身不能改变。首先必须触发此功能才能重新评估。
如果Redux状态发生变化,则会重新评估mapStateToProps
。
如果从父组件收到的道具非常不相等(已更改)和,则使用ownProps
参数,mapStateToProps
也会重新评估。
如果mapStateToProps
返回的值与上次调用的值相等,则React Redux将跳过渲染。如果它返回浅不相等的值,则将重新呈现包装的组件。假设mapStateToProps
本身是一个纯函数。
但是,有时候,当pass pass更新为true时,组件不会重新渲染
请创建一个复制此项目的最小项目,并提交相关代码示例的问题。
我如何理解关于memoization /从mapStateToProps()返回函数的注释,或者甚至不相关?
无关。
答案 1 :(得分:7)
这里要了解的几件事情:
connect
会浅显比较上一次mapState
来电与当前mapState
来电的输出。如果没有任何改变,它将不会重新渲染包装的组件。connect
仅在商店通知订阅者时才会运行mapState
。但是,如果您的mapState
函数被声明为使用两个参数,connect
将传递包装组件的props作为第二个arg,允许您执行{{1}之类的操作}}。然后,只要传入的道具不同,它就会调用state.somePerItemData[ownProps.itemId]
,因为这可能会影响mapState
的输出。mapState
参数传递,这可以为每个组件实例创建唯一的选择器函数实例。所有这一切,我担心我没有针对未更新组件的实际问题给出具体答案。我可能需要更详细地查看代码。