首页 文章

基于mapStateToProps输出重新渲染connect()ed组件

提问于
浏览
8

在基于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-reduxconnect() 的文档说:

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

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

谢谢

2 回答

  • 11

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

    函数的输出不能自行改变 . 必须先触发此功能才能重新评估 .

    如果Redux状态更改,则重新评估 mapStateToProps .

    如果从父组件接收的props非常不相等(已更改)并且您使用 ownProps 参数,则还会重新评估 mapStateToProps .

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

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

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

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

    不相关的 .

  • 7

    这里要了解几件事:

    • 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 参数传递,这可以为每个组件实例创建唯一的选择器函数实例 .

    所有这一切,我担心我对你未更新的组件的实际问题没有具体的答案 . 我可能需要更详细地查看代码 .

相关问题