Shulou(Shulou.com)05/31 Report--

This article mainly introduces the relevant knowledge of how the shallow comparison in React works, the content is detailed and easy to understand, the operation is simple and fast, and it has a certain reference value. I believe you will gain something after reading this article on how shallow comparison works in React. Let's take a look.

The most direct way to understand the concept of shallow comparison is to study the React source code. Let's take a look at the shallowEqual.js file in React:

Import is from'. / objectIs';import hasOwnProperty from'. / 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. * / 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; iTunes +) {const currentKey = keysA [I]; if (! hasOwnProperty.call (objB, currentKey) | |! is (objA [currentKey], objB [currentKey])) {return false;}} return true;}

Many steps have been performed here, so let's break it up and perform these functions step by step. Let's first look at the definition of the function, which accepts two objects that need to be compared, and the code here uses Flow as the type checking system. Both function arguments are defined using a special mixed Flow type, similar to TypeScript's unknown, which indicates that the function can be a value of any type.

Function shallowEqual (objA: mixed, objB: mixed): boolean {/ /...}

The parameters of the two functions are then compared using the is function of the React internal object. The imported is function is simply the polyfill version of JavaScript's Object.is function. This comparison function is basically equivalent to the common = = operator, with two exceptions:

Object.is thinks that + 0 and-0 are not equal, while = thinks they are equal.

Object.is thinks that Number.NaN and NaN are equal, while = thinks they are not equal.

Basically, the first conditional statement can handle all simple cases: if two function parameters have the same value, for the original type, or referencing the same objects (arrays and objects), they are considered to be equal by shallow comparison.

Import is from'. / objectIs';function shallowEqual (objA: mixed, objB: mixed): boolean {if (is (objA, objB)) {return true;} / /.}

After dealing with all the simple cases in which two function parameter values are equal or refer to the same object, take a look at the more complex structures: arrays and objects.

To ensure that we are dealing with two complex structures, the code checks whether any parameter is of type object or equal to null, which is used to ensure that we are dealing with arrays or objects, and the latter is used to filter out null values, because the result of typeof null is also object. If either condition is true, the two parameters must not be equal (otherwise the previous conditional statement will filter them out), so a shallow comparison directly returns false.

Function shallowEqual (objA: mixed, objB: mixed): boolean {/ /... If (typeof objA! = = 'object' | | objA = null | | typeof objB! = =' object' | | objB = null) {return false;} / /.}

Now that we're dealing with arrays and objects, let's delve deeper into the values of complex data structures and compare them between the two function parameters. Before that, first check whether the number of values in the two parameters is equal, if not, you can directly determine that the two values are not equal. For objects, the resulting keys array is made up of the actual key; for arrays, the resulting keys array is made up of array indexes of type string.

Function shallowEqual (objA: mixed, objB: mixed): boolean {/ /... Const keysA = Object.keys (objA); const keysB = Object.keys (objB); if (keysA.length! = = keysB.length) {return false;} / /.}

The final step is to iterate over the values of the two function parameters according to key and verify that they are equal one by one. To do this, the code uses the keys array generated in the previous step, uses hasOwnProperty to check whether key is actually an attribute of the parameter, and uses the Object.is function to compare.

Import hasOwnProperty from'. / hasOwnProperty';function shallowEqual (objA: mixed, objB: mixed): boolean {/ /... / Test for A's keys different from B. For (let I = 0; I < keysA.length; iTunes +) {const currentKey = keysA [I]; if (! hasOwnProperty.call (objB, currentKey) | |! is (objA [currentKey], objB [currentKey])) {return false;}} return true;}

If the values of any two key are not equal, then the two objects must not be equal, so the direct person will false and end the loop. If all values are equal, true is returned.

So far, we have learned the shallow comparison in React through the React source code, so let's summarize some interesting knowledge:

Shallow comparisons use the Object.is function instead of the strict equality = operator

By shallow comparison, empty objects and empty arrays are equivalent.

Through shallow comparison, objects whose array index is key and array value is value are equivalent, for example: {0: 2,1: 3} is equivalent to [2,3]

Since + 0 and-0, Number.NaN and NaN compared by Object.is are not equal, this is also applicable when comparing in complex structures.

Although {} and [] money comparisons are equal, objects nested in objects are not equal, such as {someKey: {}} and {someKey: []}.

This is the end of the article on "how shallow comparisons in React work". Thank you for reading! I believe you all have a certain understanding of the knowledge of "how does the shallow comparison in React work". If you want to learn more, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.