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

React abstracts components. Here’s how React abstracts components.

/** * Copyright (c) Facebook * This source code is licensed under the MIT */
Copy the code

As you can see, the copyright belongs to Facebook. Under MIT license. The MIT license means that software written under the MIT license can be closed source, but the copyright must be declared, and the software can be advertised under its own name. That means you can use it, and you can profit from the code you write, and you can source your own software code.

function Component(props, context, updater) {
  this.props = props;
  this.context = context;
  this.refs = emptyObject;
  this.updater = updater || ReactNoopUpdateQueue;
}
Copy the code

The new operator creates an instance of a user-defined object type or of a built-in object with a constructor. From (MDN)

Simply put, the new operator creates an instance. portal

What is an instance? Here we use a few sentences to help readers understand the examples more intuitively.

  • You two look like two peas in a pod. (You share the same genes)
  • Cookies made out of molds. (Cookie molds have the same depth)

Here the React author constructs a pseudo-class in the form of a function. The Component constructor takes three arguments:

  • Props, component properties, also known as JSX attributes added to tags.
  • Context, context
  • Updater, used for view updates.

Capitalize Component to indicate that it is a class (pseudo-class). The purpose of this base class is to help update the state of a component.

Component.prototype.setState = function(partialState, callback) {
  if (
    typeofpartialState ! = ='object' &&
    typeofpartialState ! = ='function'&& partialState ! =null
  ) {
    throw new Error(
      'setState(...) : takes an object of state variables to update or a ' +
        'function which returns an object of state variables.',); }this.updater.enqueueSetState(this, partialState, callback, 'setState');
};
Copy the code

React then provides the pseudo-class with a setState method that throws an error if part of the state passed is not an object or a function. This limits the parameter types of this method.

The operation of the state update view is then changed through the update queue agent, so, the comment says, the setState method does not guarantee synchronization of the state updates. That is, when the agent receives the setState request, it will first enqueue the process and update it in batches at a certain time.

Queues are first in, first out, but updates are merged by the updater. We can pass updates to the constructor, so we can customize our own update strategy.

Component.prototype.forceUpdate = function(callback) {
  this.updater.enqueueForceUpdate(this, callback, 'forceUpdate');
};
Copy the code

React then adds a method to the Component pseudo-class, which adds a property to the prototype object. ForceUpdate also uses the updater agent to do this. React specifies two interfaces. To implement the updater, we must implement the enqueueSetState and enqueueForceUpdate methods. With interface oriented programming, we can ignore the implementation of the method, and what changes are made inside the interface is a black box for callers. This way, we can constantly optimize our code without worrying that it suddenly won’t work. That’s the power of conventions. There is not a way of coding, convention over configuration.

function ComponentDummy() {}
ComponentDummy.prototype = Component.prototype;
const pureComponentPrototype = (PureComponent.prototype = new ComponentDummy());
pureComponentPrototype.constructor = PureComponent;
Object.assign(pureComponentPrototype, Component.prototype);
pureComponentPrototype.isPureReactComponent = true;
Copy the code
  1. The PureComponent constructor is the same as the Component constructor.
  2. Here React declares a pseudo classComponentDummy, and assign its prototype value toComponentSo, ComponentDummy has itComponentthesetStateandforceUpdateMethods. That’s how it worksinheritance.
  3. Then set the PureComponent prototype toComponentDummyThe instance. This is the Component prototypeprops.context.updater(These properties areInstance attributes) will not affectPureComponentFor each instanceprops.context.updaterIt’s all independent, it’s only affected by the instance, it’s notComponentThe influence of.
  4. Change the policy of component alignment by setting whether the component is pure or not, and use shallow alignment to improve performance.
  5. By declaring apureComponentPrototypeConst to display the prototype for PureComponentconstructorandisPureReactComponentAttribute assignment.

The object.assign () method is used to assign the values of all enumerable properties from one or more source objects to target objects. It will return the target object.

React says to avoid an extra prototype jump for these methods. Because PureComponent’s prototype is set up as an instance of ComponentDummy, the inherited prototype methods are searched through the prototype chain, resulting in a performance penalty. A layer of prototype chain lookup is avoided by calling Object.assign. beautiful!

Thank you for your reading. React uses prototypes to construct pseudo-classes to achieve inheritance and reuse, and also uses techniques such as avoiding prototype jumps to improve performance. It is a good material for learning the principles of JS prototypes and class inheritance. If you feel that you have a certain inspiration, welcome to like, move a small hand.