“This is the 24th day of my participation in the Gwen Challenge in November. Check out the details: The Last Gwen Challenge in 2021.”

Export a createContext method

export function createContext(defaultValue) {}Copy the code

The React. Js file exports a method to create a context that connects producers and consumers. The producer simply throws the product it produces into the context, and the consumer gets it from the context when he needs it. This decouples the producer from the consumer, and the producer can deliver the product without waiting for the consumer to consume it.

Circular reference (shock)

 export function createContext(defaultValue) {
   const context = {
     $$typeof: REACT_CONTEXT_TYPE,
     _currentValue: defaultValue,
     _currentValue2: defaultValue,
     _threadCount: 0.Provider:null.Consumer:null}; context.Provider = {$$typeof: REACT_PROVIDER_TYPE,
     _context: context,
   };
   context.Consumer = context;
   return context;
 }
Copy the code

As shown below, the above code constitutes a circular reference, shocking!! React wrote a loop reference that could leak memory

In the above code, we first define a context object.

  • Producer pass_contextProperty holds the context object.
  • Consumers refer to context objects, which in turn refer to consumer objects, which refer to contextual objects…
  • The producer also generates a circular reference.

It would be a never-ending story.

Once upon a time there was a mountain, there was a temple in the mountain, there was an old monk……

It just goes on and on.

My guess

Circular references keep context variables, as well as providers and consumers, from being collected by the GC in a global context and, once created, remain stable. Well, React wants producers and consumers to exist stably in the current running memory. So let’s write that down. The risk is that if createContext is called multiple times, too much memory will not be reclaimed and will eventually run out of memory.

Example use of ReactContext

const EditableContext = React.createContext<FormInstance<any> | null> (null);
<EditableContext.Provider value={form}> <tr {. props} / > </EditableContext.Provider>
constform = useContext(EditableContext)! ;Copy the code

Here, you first create a context object. The producer produces a form object, which is then consumed by the consumer through the hook function. React creates a functional component, editAbleconText.provider. The React component is a data structure in which the consumers and producers of the context are unlabeled objects. JSX does not render them when parsing, but only their children property. All they do is create context and share data. In general, producers create products in the top layer and consumers produce products in the inner layer.

Typically the ReactContext is placed at the top of the component, with many consumers below it. This way, createContext is not called too much. And it won’t be garbage collected while it’s running. In this way, we can release products produced by stable consumer producers, such as produced form objects.

Thanks for reading, ReactContext, after all, runs the risk of causing a memory leak, so we only use it where we must. It is a good practice to use it at the top of the React component. For example, set some common global properties, background color and so on.