关于React中Component和PureComponent 你应该了解的
任何技术和产品产生的时候，都应该了解当时所处的场景，以及为什么会需要这个东西，他是来解决当下业务线那些弊端，又或者优化了什么，否则它的产生将毫无意义可言。
关于源码是处于ReactBaseClasses这个文件:
import {Component, PureComponent} from './ReactBaseClasses';
进入一一剖析里面所含的技术要点，以及为什么会需要这个东西，以及使用场景，
Component
function Component(props, context, updater) {this.props = props;this.context = context;// If a component has string refs, we will assign a different object later.this.refs = emptyObject;// We initialize the default updater but the real one gets injected by the// renderer.this.updater = updater || ReactNoopUpdateQueue;
}Component.prototype.isReactComponent = {};
/*** @param {object|function} partialState Next partial state or function to* produce next partial state to be merged with current state.* @param {?function} callback Called after state is updated.* @final* @protected*/
Component.prototype.setState = function(partialState, callback) {if (typeof partialState !== 'object' &&typeof partialState !== 'function' &&partialState != null) {throw new Error('setState(...): takes an object of state variables to update or a ' +'function which returns an object of state variables.',);}this.updater.enqueueSetState(this, partialState, callback, 'setState');
};/*** Forces an update. This should only be invoked when it is known with* certainty that we are **not** in a DOM transaction.** You may want to call this when you know that some deeper aspect of the* component's state has changed but `setState` was not called.** This will not invoke `shouldComponentUpdate`, but it will invoke* `componentWillUpdate` and `componentDidUpdate`.** @param {?function} callback Called after update is complete.* @final* @protected*/
Component.prototype.forceUpdate = function(callback) {this.updater.enqueueForceUpdate(this, callback, 'forceUpdate');
};
上述源码可以得知:
- 创建了一个 Component的构造函数，并在其内部定义了 props context refs updater四个私有属性。
- 接着在其原型对象上定义了 isReactComponent对象，setState方法，forceUpdate方法
- 然后，我们在项目中使用es6的class类的继承来创建了react组件，如下：
import React, { Component, memo } from 'react'class Test extends Component<any, any> {constructor(props) {super(props)}render() {console.log(this)return <div>ReadcowPuch</div>}
}export default ReadcowPuch
- 因为我们在创建自定义的组件时继承了 react.Component， 所以 我们可以在我们所创建的组件中使用 Component构造函数 原型对象上的方法和属性。(f12)打开开发者就能找到对应的属性和方法.
PureComponent
当使用component时，父组件的state或prop更新时，无论子组件的state、prop是否更新，都会触发子组件的更新，这会形成很多没必要的render，浪费很多性能；
pureComponent的优点在于：pureComponent在shouldComponentUpdate只进行浅层的比较，只要外层对象没变化，就不会触发render,减少了不必要的render，当遇到复杂数据结构时，可以将一个组件拆分成多个pureComponent，以这种方式来实现复杂数据结构，以期达到节省不必要渲染的目的，
如：表单、复杂列表、文本域等情况；不需要开发者使用shouldComponentUpdate就可使用简单的判断来提升性能；由于进行的是浅比较，可能由于深层的数据不一致导致而产生错误的否定判断，从而导致页面得不到更新；主要在于pureComponent可以减少不必要的render，从而提高了性能，另外就是，不需要再手写shouldComponentUpdate里面的代码，从而节省了代码量；当组件更新时，pureComponent的shouldComponentUpdate函数里对props和state做了一个浅对比，如果组件的state和prop都没有发生变化，就不会触发render方法，省去了virtual DOM的diff和重新生成的过程，从而提升了性能；也正是因为是浅对比，所以不适合使用在含有多层嵌套对象的state和prop中。
function ComponentDummy() {}
ComponentDummy.prototype = Component.prototype;
/*** Convenience component with default shallow equality check for sCU.*/
function PureComponent(props, context, updater) {this.props = props;this.context = context;// If a component has string refs, we will assign a different object later.this.refs = emptyObject;this.updater = updater || ReactNoopUpdateQueue;
}const pureComponentPrototype = (PureComponent.prototype = new ComponentDummy());
pureComponentPrototype.constructor = PureComponent;
// Avoid an extra prototype jump for these methods.
assign(pureComponentPrototype, Component.prototype);
pureComponentPrototype.isPureReactComponent = true;export {Component, PureComponent};
从上面源码,我们可以看到:
const pureComponentPrototype = (PureComponent.prototype = new ComponentDummy()) 此处没有直接继承Component，是为了避免继承 Component 的Constructor方法。目的是为了 减少一些内存的使用。
Object.assign(pureComponentPrototype, Component.prototype)此处做了优化 把 Component.prototype属性浅拷贝到pureComponentPrototype上 防止原型连拉长 导致方法的多层寻找 减少查询次数
最后增加了 isPureReactComponent 属性，用来区分Component组件还是PureComponent
关于这里的assign方法，react 团队进行了单独封装成一个js文件，但本质还是调用Object.assign方法，
在一个组件从创建到展现到游览器，途中是要进行很多步骤，dom tree的渲染，css 等等的加载过程，在用PureComponent创建对应的组件，就是来优化组件，通过减少不必要的更新，进而提升性能。其每次更新时会自动的对更新前后的props和state进行一个简单的对比，来决定是否进行更新。进行的是浅比较。
1.浅比较也称引用相等，在javascript中， ===是作浅比较,只检查左右两边是否是同一个对象的引用,作为值类型，和引用类型地址值之间的比较。来判定是否有对等关系。
2.深比较也称原值相等，深比较是指检查两个对象的所有属性是否都相等,深比较需要以递归的方式遍历两个对象的所有属性，操作比较耗时，深比较不管这两个对象是不是同一对象的引用
type shallowEqual = (objA:any,objB:any) => boolean; // 浅比较type is = (a:any,b:any) => boolean; // type 声明函数约束type deepEqual = (objA:any,objB:any) => boolean; // 深比较const is:is = (a:any,b:any) => {return (a === b && (a !==0 || 1/a === 1/b)) || (a !== b && a !== b);
}
//浅比较
const shallowEqual:shallowEqual = (objA,objB) =>{if(is(objA,objB)){return true;}if(typeof objA !== 'object' || objA === null ||typeof objB !== 'object' || objB === null ){return false;}const keysA = Object.keys(objA) // 获取keyconst keysB = Object.keys(objB) if(keysA.length !== keysB.length){return false;}for (let i = 0; i < keysA.length; i++) {const currentKey = keysA[i];if(!Object.prototype.hasOwnProperty.call(objB,currentKey) ||!is(objA[currentKey],objB[currentKey])){return false;}}return true;
}// 深比较
const deepEqual:deepEqual = (objA,objB) => {// 判断是否NaN 类型if(Number.isNaN(objA) && Number.isNaN(objB)) return true;// 是否为对象let IsObj = (val:any) => typeof val === 'object' && val !== null;if(!IsObj(objA) || !IsObj(objB)) return objA === objB;if(objA === objB) return true;// 执行到这objA,objB 都是对象，为了区分 {} 和 []，如果没有此判断，会导致 deepEquals({}, []) 返回 true let isEmptyObj = (Array.isArray(objA) && !Array.isArray(objB) || Array.isArray(objB) && !Array.isArray(objA)) ;if(isEmptyObj) return false;// 获取键的长度，长度不等则不同，对数据进行遍历进行对比if (Object.keys(objA).length !== Object.keys(objB).length) return false;for (let key in objA) {if (objA.hasOwnProperty(key)) {const isEqual = deepEqual(objA[key], objB[key])if (!isEqual) return isEqual;}}return true;
}console.log(deepEqual(0, 0)); // true
console.log(deepEqual('str', 'str')); // true
console.log(deepEqual(true, true)); // true
console.log(deepEqual(undefined, undefined)); // true
console.log(deepEqual(null, null)); // true
console.log(deepEqual({}, {})); // true
console.log(deepEqual({val: 1}, {val: 1})); // true
console.log(deepEqual([1,2,3], [1,2,3])); // true
console.log(deepEqual([1,2,{a: 1}], [1,2,{a: 1}])); // true
3.PureComponent的浅比较源码中主要用的是 shallowEqual，而在该方法内部主要是利用了 Object.is() code
关于源码当中使用的Object.is方法
以下是ECMAScript® 2023 Language Specification 对于该方法的一些概述：
20.1.2.14 Object.is ( value1, value2 )
When the is function is called with arguments value1 and value2, the following steps are taken:
Return SameValue(value1, value2).
对于源码的一些改动（ts写法)：
type is = (a:any,b:any) => boolean; // type 声明函数约束const is:is = (a:any,b:any) => {return (a === b && (a !==0 || 1/a === 1/b)) || (a !== b && a !== b);}const ObjectIs : (x:any,y:any) => boolean = typeof Object.is === 'function' ? Object.is : is;注意点tips:
// Case 1: Evaluation result is the same as using ===
Object.is(25, 25); // true
Object.is('foo', 'foo'); // true
Object.is('foo', 'bar'); // false
Object.is(null, null); // true
Object.is(undefined, undefined); // true
Object.is(window, window); // true
Object.is([], []); // false
var foo = { a: 1 };
var bar = { a: 1 };
Object.is(foo, foo); // true
Object.is(foo, bar); // false
// Case 2: Signed zero
Object.is(0, -0); // false
Object.is(+0, -0); // false
Object.is(-0, -0); // true
Object.is(0n, -0n); // true
// Case 3: NaN
Object.is(NaN, 0/0); // true
Object.is(NaN, Number.NaN) // true
源码链接地址