redux connect的淺比較說明

看風景就發表於2018-09-28

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});

相關文章