React.PureComponent is almost identical to React.Component, But the React.PureComponent implements shouldComponentUpate() by using a shallow contrast between props and state.
In PureComponent, if you include complex data structures, you can make false negative judgments due to deep data inconsistencies and the interface will not be updated.
If we define shouldComponentUpdate(), regardless of whether the component is a PureComponent, it executes shouldComponentUpdate to determine whether it is update or not. ShouldComponentUpdate () if the component does not implement shouldComponentUpdate(), then it checks if the component is a PureComponent, and if it is, shallowEqual comparison is performed between the old and new props and state. If the new and old are inconsistent, the update is fired.
Shallow comparison: Performs equality by iterating over keys on an object and returns false if any key has values that are not strictly equal between parameters. Returns true if all keys are strictly equal. shallowEqual
The difference: PureComponent shouldComponentUpate() comes with a light contrast between props and state. Component does not. The PureComponent weakness can generate false negative judgment due to deep data inconsistencies, so shouldComponentUpdate returns false and the interface is not updated. The PureComponent advantage is that developers don’t need to implement shouldComponentUpdate themselves to make simple judgments to improve performance. Why does PureComponent’s complex data structure lead to false negatives due to deep data inconsistencies? Objects in JavaScript are generally Mutable. Because reference assignment is used, new objects simply refer to the original object, and changing new objects affects the original object. Such as foo = {a: 1}; bar=foo; Bar. A =2 and you’ll notice that foo.a is also changed to 2.
To solve this problem, it is common practice to use shallowCopy or deepCopy to avoid being modified, but this results in wasted CPU and memory.
let foo = {a: {b: 1}}; let bar = foo; bar.a.b = 2; console.log(foo.a.b); // Prints 2 console.log(foo === bar); // Print true 1, 2, 3, 4, 5 in fb shallowEqual.
function is(x: mixed, y: mixed): boolean { // SameValue algorithm if (x === y) { // Steps 1-5, 7-10 // Steps 6.b-6.e: + 0! = -0 // Added the nonzero y check to make Flow happy, but it is redundant return x ! == 0 || y ! == 0 || 1 / x === 1 / y; } else { // Step 6.a: NaN == NaN return x ! == x && y ! == y; }}
function shallowEqual(objA: mixed, objB: mixed): boolean { if (is(objA, objB)) { return true; }
if (typeof objA ! == ‘object’ || objA === null || typeof objB ! == ‘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; }
Let’s first analyze the is() function:
In JS, ‘===’ can determine whether data types are equal or not, but in fact this way is not very rigorous, for example
+ 0 = = = 0; // js prints true NaN === NaN; We want +0 and -0 to be false, NaN and NaN to be true, so we can use this method
1/+0 // result is Infinity 1/-0 // result is -infinity Infinity === -infinity; // false
Solve NaN === NaN is false, can solve x by NaN and itself is not equal to the property! == x && y ! == y 1 2 3 4 5 6 So the is() function first compares data types by ‘===’ and then resolves the +0/-0 comparison problem with NaN.
Next, analyze the shallowEqual() function
Function shallowEqual(objA: mixed, objB: mixed): Boolean {// if (is(objA, objB)); }
If (typeof objA! == ‘object’ || objA === null || typeof objB ! == ‘object’ || objB === null) { return false; }
// Get all keys const keysA = object.keys (objA); const keysB = Object.keys(objB);
If (keysa.length! == keysB.length) { return false; }
// If the number of keys is the same, use a layer for loop to compare for (let I = 0; i < keysA.length; I++) {if (// check whether object B contains object A’s key. HasOwnProperty. Call (objB, keysA [I]) | | / / through the comparison of A and B is () function key corresponding to the data! is(objA[keysA[i]], objB[keysA[i]]) ) { return false; }}
Here is an example of the use of components:
Such as:
class ChildComponent extends React.PureComponent { render() { return(
However, when we modify numbers in MainComponent, ChildComponent is not refreshed. The reason is that JS uses reference assignment, the new object simply refers to the original object, although changing the new object affects the original object, but the address of the object is still the same, the use of === comparison method is equal. In PureComponent, prop is judged equal without triggering Render ().
The easiest way to avoid such problems is to avoid using properties or states whose values might mutate and instead use a copy that returns a new variable.
handleClick() { this.setState(prevState => ({ words: […prevState.words, ‘marklar’], })); };
The other way is to use Immutable. Js ———————————————— The original link: blog.csdn.net/u013003052/…