The React source reading | React. PureComponent principle

preface

PureComponent uses shallow comparison functions and states to prevent pages from rendering unnecessarily. In this article, we introduce the implementation of shallow comparison rules in PureComponent using React source code

version

• The react 16.6.1

conclusion

• Object declarations are not recommended in Render primarily for activation purposesPureComponentThe render filter rules prevent unnecessary components from rendering
• PureComponentCheck whether the number of properties in the props and state are changed, and then compare the value of the properties in the props with object. is.
• If the values of the properties in state and props are reference addresses, you need to ensure that the reference address is updated every time you want to trigger a page rendering

The source code interpretation

1. According to the projectReactBaseClasses.js, andcomponentClass,PureComponentMore componentsisPureReactComponentattribute

Harvest from the following code / * * * / packages/react/SRC/ReactBaseClasses js, line 139-143 "* /
const pureComponentPrototype = (PureComponent.prototype = new ComponentDummy());
pureComponentPrototype.constructor = PureComponent;
// Avoid an extra prototype jump for these methods.
Object.assign(pureComponentPrototype, Component.prototype);
pureComponentPrototype.isPureReactComponent = true;
Copy the code

2. Search globally within the projectisPureReactComponentThe props property is used to compare the props and state propertiesReactShallowRenderer.jsIf the props shis not equal or the state shis not equal, update the render

Harvest from the following code / * * * / packages/react - test - the renderer/SRC/ReactShallowRenderer js, line 686-689 "* / 
else if(type.prototype && type.prototype.isPureReactComponent) { shouldUpdate = ! shallowEqual(oldProps, props) || ! shallowEqual(oldState, state); }Copy the code

3. Jump toshallowEqualFunction implementation

Harvest from the following code / * * * / packages/Shared/shallowEqual js, all "* /
import is from './objectIs';
const hasOwnProperty = Object.prototype.hasOwnProperty;
/** * Performs equality by iterating through keys on an object and returning false * when any key has values which are not strictly equal between the arguments. * Returns true when the values of all keys are strictly equal. * * Equality is performed by traversing the keys on the object, * returning false if the values of any key are not strictly equal between arguments, * returning true if the values of all keys are strictly equal. * /
function shallowEqual(objA: mixed, objB: mixed) :boolean {
  if (is(objA, objB)) {
    return true;
  }
  if (
    typeofobjA ! = ='object' ||
    objA === null ||
    typeofobjB ! = ='object' ||
    objB === null
  ) {
    return false;
  }
  const keysA = Object.keys(objA);
  const keysB = Object.keys(objB);
  if(keysA.length ! == keysB.length) {return false;
  }
  // Test for A's keys different from B.
  for (let i = 0; i < keysA.length; i++) {
    if(! hasOwnProperty.call(objB, keysA[i]) || ! is(objA[keysA[i]], objB[keysA[i]]) ) {return false; }}return true;
}
Copy the code

4. React shallow comparisonshallowEqualRules for
   • With two parametersisMethod to determine whether or not equal equal continues execution unequal returns false
   • Check whether it is an object Yes The object continues execution No object Returns false
   • Check whether the number of object attributes is equal. If the number of object attributes is equal, the execution continues. If the number of object attributes is not equal, false is returned
   • Iterate through the properties of the object one by one and useisThe check is whether the corresponding object properties of the two parameters are equal
   • The following is the algorithm flow chart:

annotation

• React source code project
• The truncated code in this paper only truncates relevant parts, regardless of semantics and code context
• isMethod is theObjece.isMethod, the judgment rules are as follows:
• Is undefined
• Is null
• Either true or false
• Are strings of the same length and the same characters are arranged in the same order
• Are the same objects (meaning each object has the same reference)
• It’s all numbers and
  • Are + 0
  • Is 0
  • Is NaN
  • Or are both non-zero and non-nan and have the same value