redux connect的浅比较说明

最新推荐文章于 2022-09-22 19:49:55 发布

weixin_38166726

最新推荐文章于 2022-09-22 19:49:55 发布

阅读量238

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/mengff/p/9718182.html

本文深入解析Redux的connect方法，介绍其如何作为高阶组件工作，并详细解释了connect的参数选项，包括pure标志及其对组件更新的影响。同时，文章提供了在遇到组件不更新问题时的解决策略。

redux的connect方法是一个高阶组件，对包装的组件会在ShouldComponentUpdate中实现一个默认的浅比较。

connect形式如下：

connect([mapStateToProps], [mapDispatchToProps], [mergeProps], [options])

其中options参数如下：

[pure] (Boolean): 如果参数为true，用来避免重新渲染并调用mapStateToProps、mapDispatchToProps和mergeProps时基于各自的等值比较函数来比较所涉及到的state和props对象。
[areStatesEqual] (Function): 如果参数pure为true,用来比较传入的store与之前的store值。默认值: strictEqual (===)。
[areOwnPropsEqual] (Function):如果参数pure为true，用来比较传入的props与之前的props值。默认值: strictEqual (===)。
[areStatePropsEqual] (Function):如果参数pure为true，用以比较mapStateToProps函数的结果与之前的结果值。
[areMergedPropsEqual] (Function): 如果参数pure为true，比较mergeProps函数的结果与之前的值。默认值为:shallowEqual。
[storeKey] (String): 用以从context获取store的key值。你仅仅可能在有多个store值的情况下才需要这个选项，默认值为:store。

pure参数为true，会进行浅比较，为false，总是返回true，直接渲染。默认为true，相当于实现了一个pureComponent。

若发生组件不更新的问题，可以考虑关闭默认的浅比较，connect(null, null, null, {pure: false});

转载于:https://www.cnblogs.com/mengff/p/9718182.html