在基于React Redux的项目中,我有一个 connect()
ed组件,它通过API提取来检查用户权限 . 提取的权限存储在Redux存储中 .
该组件基本上看起来像 <Can check="...">...</Can>
,它与我们的API(通过Redux操作)对话以解决检查 . 如果授予了权限,则呈现 this.props.children
,否则返回 null
.
为此, mapStateToProps()
从商店中的授权数据计算 passes
prop,在 <Can />
s render()
方法中检查 . 我利用 ownProps
参数 mapStateToProps()
获取"stuff to check"并计算 passes
标志 .
在每个组件装载上都有's a bit of caching going on so I don' t重新获取,它基本上可以工作 . 但是,有时候,当 passes
prop更新为 true
时,组件将不会重新渲染(但是它会在导航后渲染 - 使用反应路由器 - 然后再返回,所以基本上如果重新安装组件) .
如果 mapStateToProps()
的输出发生变化,是否会重新渲染 connect()
ed组件? react-redux
的 connect()
的文档说:
如果将ownProps指定为第二个参数,则其值将是传递给组件的props,并且只要组件接收到新的props,就会重新调用mapStateToProps .
这是否意味着传入 ownProps
会将渲染更改为仅在道具更改时重新渲染,或以任何其他方式?如何理解有关从 mapStateToProps()
进行记忆/返回功能的说明,或者甚至不相关?
谢谢
2 回答
函数的输出不能自行改变 . 必须先触发此功能才能重新评估 .
如果Redux状态更改,则重新评估
mapStateToProps
.如果从父组件接收的props非常不相等(已更改)并且您使用
ownProps
参数,则还会重新评估mapStateToProps
.如果
mapStateToProps
返回的值与上次调用的值相等,则React Redux将跳过渲染 . 如果它返回浅不相等的值,则将重新呈现包装的组件 . 假设mapStateToProps
本身是纯函数 .请创建一个复制此项目的最小项目,并提交相关代码示例的问题 .
不相关的 .
这里要了解几件事:
connect
将浅析 - 将最后一次mapState
调用的输出与当前mapState
调用进行比较 . 如果没有任何改变,它将不会重新渲染包装的组件 .默认情况下,
connect
仅在商店通知订阅者时运行mapState
. 但是,如果mapState
函数被声明为接受两个参数,connect
将传递包装组件的props作为第二个arg,允许您执行state.somePerItemData[ownProps.itemId]
之类的操作 . 每当传入的道具不同时,它也会调用mapState
,因为这可能会影响mapState
的输出 .重新选择's default memoization only keeps a single cached value per selector function. If you have a component that is instantiated multiple times, and all instances are sharing the same selector function instance, then the selector'的memoization可能不会按你想要的方式工作,因为每个组件实例可能用不同的输入(例如他们自己的道具)调用它 . 因此,作为一种非常高级的优化,您实际上可以将工厂函数作为
mapState
参数传递,这可以为每个组件实例创建唯一的选择器函数实例 .所有这一切,我担心我对你未更新的组件的实际问题没有具体的答案 . 我可能需要更详细地查看代码 .