Component、PureComponent源码解析
1.什么是Component,PureComponent?
都是class方式定义的基类,两者没有什么大的区别,只是PureComponent内部使用shouldComponentUpdate(nextProps,nextState)方法,通过浅比较(比较一层),来判断是否需要重新render()函数,如果外面传入的props或者是state没有变化,则不会重新渲染,省去虚拟dom的生成和对比过程,从而提高性能。
2.PureComponent应用
一般用于纯函数
3.Component源码分析
/*
Component 基类
1.设置react的props,content,refs,updater等属性
2.要知道class继承是先将父类实例对象的属性和方法,加到this上面(所以必须先调用super方法),然后再用子类的构造函数修改this
class A extends React.Component{construcroe(){props){super(props)}}
*/
function Component(props, context, updater) {
this.props = props;//父子传递数据
this.context = context;//爷孙传递数据
this.refs = emptyObject; //子到父传递数据
this.updater = updater || ReactNoopUpdateQueue; //更新数据
}
Component.prototype.isReactComponent = {};//给Component原型上添加属性
/*
使用setState来改变Component类内部的变量 enqueueSetState调用这个方法实现更新机制
partialState:要更新的state,可以是object/function
*/
Component.prototype.setState = function (partialState, callback) {//给Component原型上添加方法
//判断setState中的partialState是否符合条件 如果不符合 则抛出错误
if (!(typeof partialState === 'object' || typeof partialState === 'function' || partialState == null)) {
{
throw Error("setState(...): takes an object of state variables to update or a function which returns an object of state variables.");
}
}
//state的更新机制 在react-dom中实现 不同平台更新内容可能不同
this.updater.enqueueSetState(this, partialState, callback, 'setState');
};
//在Component的深层次改变但是没有调用setState时 调用此方法 强制更新一次
Component.prototype.forceUpdate = function (callback) {
this.updater.enqueueForceUpdate(this, callback, 'forceUpdate');
};
4.PureComponent源码解析
function ComponentDummy() { }
// ComponentDummy的原型继承Component的原型
ComponentDummy.prototype = Component.prototype; function PureComponent(props, context, updater) {//构造函数属性(实例属性),会被实例共享,但不会被修改
this.props = props;
this.context = context;
this.refs = emptyObject;
this.updater = updater || ReactNoopUpdateQueue;
}
//不能直接继承Component 因为如果是直接继承Component 还会继承它的Constructor方法 目的:减少一些内存使用
var pureComponentPrototype = PureComponent.prototype = new ComponentDummy();
//实例沿着原型链向上查询,只要是自己继承的,都被认作自己的构造函数
pureComponentPrototype.constructor = PureComponent;
//这里做了优化 把 Component.prototype属性浅拷贝到pureComponentPrototype上 防止原型连拉长 导致方法的多层寻找 减少查询次数
_assign(pureComponentPrototype, Component.prototype);
//添加了这个isPureReactComponen参数 来判断是Component还是PureComponent组件
pureComponentPrototype.isPureReactComponent = true;
5.PureComponent如何实现是否需要更新,来提高性能?
//这个变量用来控制组件是否需要更新 默认为true进行更新操作
var shouldUpdate = true;
// inst是组件实例 如果PureComponent定义有shouldComponentUpdate方法 则和Component基类一样
if (inst.shouldComponentUpdate) {
shouldUpdate = inst.shouldComponentUpdate(nextProps, nextState, nextContext);
} else {
if (this._compositeType === CompositeType.PureClass) {
// 用shallowEqual函数对比 props 和 state 的改动
// 如果都没改变就不用更新
shouldUpdate =
!shallowEqual(prevProps, nextProps) ||
!shallowEqual(inst.state, nextState);
}
}
1.shallowEqual函数解析
目的:比较值相等,或者对象含有相同的属性、且属性值是否相等
function is(x, y) { //处理了基本类型的比较
//1,针对+0===-0的情况
//2. 针对NaN!==NanN的情况
return x === y && (x !== 0 || 1 / x === 1 / y) || x !== x && y !== y
;
}
var is$1 = typeof Object.is === 'function' ? Object.is : is;
var hasOwnProperty$2 = Object.prototype.hasOwnProperty; //返回值:false更新 true不更新
function shallowEqual(objA, objB) {
if (is$1(objA, objB)) {//基本数据类型 不更新
return true;
}
//由于Object.is 可以对基本数据类型做一个精确的比较 如果不等只有一种情况 那就是object,objA/objB
中,只要有一个不是object
或为null
则返回false
if (typeof objA !== 'object' || objA === null || typeof objB !== 'object' || objB === null) {
return false;
}
//过滤掉基本数据类型 就是对象比较 首先比较长度 优化性能
//比较oldProps和新的Props以及oldState和newState长度是否相同 如果长度不同则重新更新渲染 如果长度相同则不用重新渲染 如果不相等 不会往下执行 优化性能
var keysA = Object.keys(objA);
var keysB = Object.keys(objB);
if (keysA.length !== keysB.length) {
return false;
}
//如果key相等
//如果objA的属性不在objB里,或者是objA的属性值和objB的属性值不等 则重新渲染 不考虑当keysA[i]为对象的多层问题 浅显比较 提高性能
for (var i = 0; i < keysA.length; i++) {
if (!hasOwnProperty$2.call(objB, keysA[i]) || !is$1(objA[keysA[i]], objB[keysA[i]])) {
return false;
}
return true;
}
}
1.理解:is()函数 x === y && (x !== 0 || 1 / x === 1 / y) || x !== x && y !== y 解决了NaN不等于NaN的情况和-0===+0的情, 实现了Object.is
+0 === -0 //true
NaN === NaN // false
Object.is(+0, -0) // false
Object.is(NaN, NaN) // true
2.Object.prototype.hasOwnProperty 用来判断某个属性是否是对象自身的属性
3.浅比较的使用
对象的value是简单数据类型
const a={c:1,d:2}
const b={c:1,d:2}
Object.is(a,b) //false
hasOwnProperty.call(b, 'c') //true
Object.is(a['c'], b['c']) //true
对象的value有复杂数据类型
const a={c:{e:3},d:2}
const b={c:{e:3},d:2}
hasOwnProperty.call(b, 'c') //true
//可以看到,只能用于浅比较 这里会出现错误判定 从而重新更新render
Object.is(a['c'], b['c']) //false
注意点:shouldComponentUpdate(nextProps,nextState) 返回false阻止更新 挂载阶段是不起作用的 更新阶段起作用 图如下
Component、PureComponent源码解析的更多相关文章
- React的Component,PureComponent源码解析(二)
1.什么是Component,PureComponent? 都是class方式定义的基类,两者没有什么大的区别,只是PureComponent内部使用shouldComponentUpdate(nex ...
- android源码解析(十七)-->Activity布局加载流程
版权声明:本文为博主原创文章,未经博主允许不得转载. 好吧,终于要开始讲讲Activity的布局加载流程了,大家都知道在Android体系中Activity扮演了一个界面展示的角色,这也是它与andr ...
- vueJs 源码解析 (三) 具体代码
vueJs 源码解析 (三) 具体代码 在之前的文章中提到了 vuejs 源码中的 架构部分,以及 谈论到了 vue 源码三要素 vm.compiler.watcher 这三要素,那么今天我们就从这三 ...
- VueJs 源码解析 (四) initRender.Js
vueJs 源码解析 (四) initRender.Js 在之前的文章中提到了 vuejs 源码中的 架构部分,以及 谈论到了 vue 源码三要素 vm.compiler.watcher 这三要素,那 ...
- 【vuejs深入二】vue源码解析之一,基础源码结构和htmlParse解析器
写在前面 一个好的架构需要经过血与火的历练,一个好的工程师需要经过无数项目的摧残. vuejs是一个优秀的前端mvvm框架,它的易用性和渐进式的理念可以使每一个前端开发人员感到舒服,感到easy.它内 ...
- iview源码解析(1)
概述 公司技术栈开始用vue主导开发,但因为公司前端会vue的不多所以在项目中用到vue的技术不是很深,之前出去面试被接连打击,而且本来打算开始为公司vue的项目构建自己的组件库所以去下载了iview ...
- @Controller和@RestController源码解析
2018年不知不觉已经走到了尾声,你还在为分不清@Controller和@Restcontroller而烦恼吗?这篇博文从源码层面分析这两个注解,值得一读. 首先贴一张源码的图,对比一下,左边是@Co ...
- Spring Security 访问控制 源码解析
上篇 Spring Security 登录校验 源码解析 分析了使用Spring Security时用户登录时验证并返回token过程,本篇分析下用户带token访问时,如何验证用户登录状态及权限问 ...
- redux的源码解析
一. redux出现的动机 1. Javascript 需要管理比任何时候都要多的state2. state 在什么时候,由于什么原因,如何变化已然不受控制.3. 来自前端开发领域的新需求4. 我们总 ...
随机推荐
- Frp内网穿透搭建,家庭主机对外提供接口,支持ssh访问
Frp内网穿透搭建,家庭主机对外提供接口,支持ssh访问 1.使用场景: 需求1.家中服务器 ubuntu 主机,跑接口服务,需要对外暴漏, 需求2.同时需要在外网ssh远程 关键词: frp内网 ...
- 难搞的偏向锁终于被 Java 移除了
背景 在 JDK1.5 之前,面对 Java 并发问题, synchronized 是一招鲜的解决方案: 普通同步方法,锁上当前实例对象 静态同步方法,锁上当前类 Class 对象 同步块,锁上括号里 ...
- CS5216 设计于DP转HDMI转换器|DP转HDMI 1080P中继器 电平转化器开关设计方案与线路图
CS5216是一款Displayport to hdmi 1080p音视频信号转换芯片,主要用于设计与开发DP转HDMI 转换器.中继器.电平转换器等产品当中.它支持交流和直流耦合TMDS信号高达1. ...
- 编写Java程序,创建一个 XML 文档,文档名为“hero.xml”,用于保存“王者荣耀”的英雄信息。
查看本章节 查看作业目录 需求说明: 创建一个 XML 文档,文档名为"hero.xml",用于保存"王者荣耀"的英雄信息.英雄信息包括编号(id).姓名(na ...
- Java面向对象笔记 • 【第7章 集合】
全部章节 >>>> 本章目录 7.1 集合概述 7.1.1 Java集合体系概述 7.1.2 实践练习 7.2 List集合 7.2.1 ArrayList实现类 7.2. ...
- Sqoop2开启Kerberos安全模式
Sqoop2开启Kerberos安全模式, 基于版本sqoop-1.99.7, 在已经安装好的sqoop2环境上配置kerberos. 1.安装规划 10.43.159.9 zdh-9 sqoop2k ...
- CSS基础 元素整体透明效果(包含内容+背景及子元素)
属性名:opacity:数字+px; 数字值取值0-1之间数字 数字值:1表示完全不透明 0表示完全透明使用后效果 html结构代码 <div class="box"> ...
- Linux系统使用crt登录之后如何显示横幅消息
打开 /etc/motd 编辑内容即可 效果如下
- SYCOJ2100摆动序列
题目-摆动序列 (shiyancang.cn) 直接分成两部分,插入即可.只有一个地方不对,那就是符号.两个大的放一个小的,两个小的放一个大的.那么每次的大的放最大的,每次的小的放其次小的,用完就不用 ...
- C# 10分钟完成百度翻译(机器翻译)——入门篇
我们之前基于百度ai开发平台实现了人脸识别 [1].文字识别 [2].语音识别 [3] 与合成的入门和进阶,今天我们来实现百度翻译的实现. 随着"一带一路"政策的开展,各种项目迎接 ...