redux connect的浅比较说明
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});
redux connect的浅比较说明的更多相关文章
- redux & connect
redux & connect import React, { Component, // useState, // useEffect, } from 'react'; import { b ...
- [Redux] Accessing Dispatch and State with Redux -- connect
If you have props and actions, you want one component to access those props and actions, one solutio ...
- redux源码浅入浅出
运用redux有一段时间了,包括redux-thunk和redux-saga处理异步action都有一定的涉及,现在技术栈转向阿里的dva+antd,好用得不要不要的,但是需要知己知彼要对react家 ...
- 【温故知新】—— React/Redux/React-router4基础知识&独立团Demo
前言:React专注View层,一切皆组件:全部使用ES6语法,最新版本为React16. Redux是专注于状态管理的库,和react解耦:单一状态,单向数据流.[独立团github地址] 一.Re ...
- 手写 redux 和 react-redux
1.手写 redux redux.js /** * 手写 redux */ export function createStore(reducer) { // 当前状态 let currentStat ...
- BAT 前端开发面经 —— 吐血总结 前端相关片段整理——持续更新 前端基础精简总结 Web Storage You don't know js
BAT 前端开发面经 —— 吐血总结 目录 1. Tencent 2. 阿里 3. 百度 更好阅读,请移步这里 聊之前 最近暑期实习招聘已经开始,个人目前参加了阿里的内推及腾讯和百度的实习生招聘, ...
- QQ音乐:React v16 新特性实践
欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由QQ音乐技术团队发表于云+社区专栏 自从去年9月份 React 团队发布了 v16.0 版本开始,到18年3月刚发布的 v16.3 版 ...
- 【招聘App】—— React/Nodejs/MongoDB全栈项目:socket.io&聊天实现
前言:最近在学习Redux+react+Router+Nodejs全栈开发高级课程,这里对实践过程作个记录,方便自己和大家翻阅.最终成果github地址:https://github.com/66We ...
- 【招聘App】—— React/Nodejs/MongoDB全栈项目:个人中心&退出登录
前言:最近在学习Redux+react+Router+Nodejs全栈开发高级课程,这里对实践过程作个记录,方便自己和大家翻阅.最终成果github地址:https://github.com/66We ...
随机推荐
- Linux命令应用大词典-第10章 Shell相关命令
10.1 commond:抑制正常的Shell函数查找 10.2 exec:使用执行命令替换当前的shell进程 10.3 bash:GNU的Bourne-Again Shell解释器 10.4 bu ...
- Struts2(九.初始化用户列表时显示用户照片数目)
1.userlist.jsp //显示每个用户照片的数目(遍历每个用户) $(".picture").each(function(i,e){ $.post("${page ...
- 01背包问题:DP
题目描述: 有 N 件物品和一个容量是 V 的背包.每件物品只能使用一次. 第 i 件物品的体积是 vi,价值是 wi. 求解将哪些物品装入背包,可使这些物品的总体积不超过背包容量,且总价值最大.输出 ...
- #pragma pack(n)对齐格式
#pragma pack(n)对齐格式 #pragma pack(n) 是预处理器用来指定对齐格式的指令,表示n对齐.当元素字节小于n时,要扩展到n:若元素字节大于n则占用其实际大小. struct ...
- Spring 3整合Quartz 2实现定时任务:动态添加任务
先展示一下后台管理定时任务效果图: 1.新增任务页面: 2.列表页(实现任务的禁用启用) 3.数据库脚本: -- ------------------------------ Table struct ...
- 头文件#ifndef #define #endif使用
想必很多人都看过“头文件中的 #ifndef #define #endif 防止该头文件被重复引用”.但是是否能理解“被重复引用”是什么意思?是不能在不同的两个文件中使用include来包含这个头文件 ...
- location 匹配规则 (NGINX)
转:https://moonbingbing.gitbooks.io/openresty-best-practices/ngx/nginx_local_pcre.html location 匹配规则 ...
- lintcode-160-寻找旋转排序数组中的最小值 II
160-寻找旋转排序数组中的最小值 II 假设一个旋转排序的数组其起始位置是未知的(比如0 1 2 4 5 6 7 可能变成是4 5 6 7 0 1 2). 你需要找到其中最小的元素. 数组中可能存在 ...
- lintcode-149-买卖股票的最佳时机
149-买卖股票的最佳时机 假设有一个数组,它的第i个元素是一支给定的股票在第i天的价格.如果你最多只允许完成一次交易(例如,一次买卖股票),设计一个算法来找出最大利润. 样例 给出一个数组样例 [3 ...
- C++并行编程1
what is concurrency 我们可以一边看电视,一边唱歌.人并行非常容易理解,但是计算机呢?是不是我们一边编辑着word文档,一边听着歌,这样计算机就是在并行吗?不一定欧,如果你计算机是单 ...