“This is the 26th day of my participation in the November Gwen Challenge. See details of the event: The Last Gwen Challenge 2021”.

When looking at the React source code, there are a lot of contents in the reactsymbols. js file. Ah, I explode. With all the publicity, I guess I need to get to know you better.

What is ReactSymbols used for

Used to mark the react virtual node type. If there is no local identifier or polyfill, pure numbers will be used for better performance.

export let REACT_ELEMENT_TYPE = 0xeac7

Let = constant; let = constant The question mark face!

The React element type is defined, and the answer is contained in the comment. Not all milk is called Terunsus, and not all browsers support the Symbol type.

In June 2015, es6 was born out of the blue, and the Symbol type was officially included in the original JS type.

Here, React uses the if statement and let variable to make it compatible with older browsers.

const symbolFor = Symbol. for
REACT_ELEMENT_TYPE =symbolFor("react.element")
Copy the code

React uses prefixes to avoid collisions.

The symbol.for (key) method finds the corresponding Symbol from the run-time Symbol registry based on the given key key, returns it if it is found, or creates a new Symbol associated with the key and places it in the global Symbol registry.

In short, these identifiers are used to accurately determine the types of objects in React.

Also worth noting is a method.

export function getIteratorFn(maybe Iterable) {
if(maybeIterable === null || typeofmaybeIterable ! = ="object") {return null}
const maybeIterable =maybeIterable[MAYBE_ITERATOR_SYMBOL]
if (typeof maybeIterable === "function") {
   return maybeIterable
}
return null
}
Copy the code

This method returns a traversal function.

Symbol.iterator defines the default iterator for each object. This iterator can be used by for… Of recycling.

To recall, in ReactChlidren. Js, this is the traverser that returns an array of React nodes. Then, each React node is iterated through the next method of the iterator to count the number of React nodes.

Here are the type identifiers defined by ReactSymbols:

  • REACT_ELEMENT_TYPE, React element type, used to indicate that this is a React element.

  • REACT_PORTAL_TYPE, React Slot type. This type can insert a child component at any position of the parent component.

  • REACT_FRAGMENT_TYPE, react fragment type. This type can create a fragment without a root label.

We’ll learn more about react identifiers over time.

In summary, the React identifier is globally unique and is used to exactly return the react object type. It acts like a UUID. Thank you for reading, short step, beyond into jianghai, move small hands, welcome to praise!