react source code analysis 5 Jsx& core api

Video Explanation (efficient learning): Enter learning

What is virtual Dom

In a word, js objects are used to represent dom information and structure. When updating, the dom corresponding to the updated object is re rendered. This object is react Return result of createelement()

virtual Dom is a programming method. It is stored in memory in the form of objects. It describes the necessary information of our Dom and synchronizes with the real DOM with modules such as react dom. This process is also called reconciler. This method can declaratively render the corresponding ui state, freeing us from DOM operation. In react, the relevant information of the component tree is stored in the form of fiber tree, Relevant DOM can be rendered incrementally during update, so fiber is also part of the implementation of virtual Dom

Why use virtual Dom

A large number of dom operations are slow, and small updates may cause page rearrangement. js objects are better than in memory and can be processed faster. We can compare the differences between new and old virtual Dom through diff algorithm, and perform dom changes in batch, asynchronous and minimized to improve performance

In addition, it can cross platform, JSX -- > reactelement object -- > Real node. If there is an intermediate layer, the corresponding processing can be carried out before operating the real node, and the processing results are reflected on the real node. The real node can be browser environment or Native environment

Is virtual Dom really fast? In fact, virtual Dom is only fast when updating, but not necessarily fast at the beginning of the application

const div = document.createElement('div');
let str = ''
for(let k in div){
  str+=','+k
}
console.log(str)

jsx&createElement

jsx can declaratively describe views and improve development efficiency. It can be converted into react through babel The syntax of createElement () is also an extension of js syntax.

jsx is the render function of ClassComponent or the return value of FunctionComponent. It can be used to represent the content of the component. After babel compilation, it will be finally compiled into react The reason why you don't need to view the result of 'jsbex' after the jsbex file of 'create from real' is compiled

​ React. The source code of createElement does the following things

• Process config and assign other config except reserved attribute to props
• Assign children to props children
• Processing defaultProps
• Calling ReactElement returns a jsx object (virtual DOM)

//ReactElement.js
export function createElement(type, config, children) {
  let propName;

  const props = {};

  let key = null;
  let ref = null;
  let self = null;
  let source = null;

  if (config != null) {
    //Process config and assign other config except reserved attribute to props
    //...
  }

  const childrenLength = arguments.length - 2;
  //Assign children to props children
  //...

  //Processing defaultProps
  //...

  return ReactElement(
    type,
    key,
    ref,
    self,
    source,
    ReactCurrentOwner.current,
    props,
  );
}

const ReactElement = function(type, key, ref, self, source, owner, props) {
  const element = {
    $$typeof: REACT_ELEMENT_TYPE,//Indicates that it is of type ReactElement

    type: type,//class or function
    key: key,//key
    ref: ref,//ref attribute
    props: props,//props
    _owner: owner,
  };

  return element;
};

t y p e o f surface show of yes group piece of class type ， example as stay source code in have one individual check check yes no yes close method E l e m e n t of letter number ， Just yes root o b j e c t . typeof refers to the type of component. For example, in the source code, there is a function to check whether it is a legal Element, that is, the root object Typeof refers to the type of component. For example, in the source code, there is a function to check whether it is a legal Element, that is, the root object typeof === REACT_ Element_ Type

//ReactElement.js
export function isValidElement(object) {
  return (
    typeof object === 'object' &&
    object !== null &&
    object.$$typeof === REACT_ELEMENT_TYPE
  );
}

If the component is ClassComponent, the type is the class itself. If the component is created by FunctionComponent, the type is this function. ClassComponent is used in the source code prototype. Isreactcomponent to distinguish the two. Note that components created by class or function must be capitalized first, and then treated as ordinary nodes. Type is a string.

There are no priority, status, effectTag and other tags on the jsx object. These tags are on the Fiber object. During mount, the Fiber is built according to the jsx object. During update, a new workInProgress Fiber is formed according to the comparison between the latest jsx and current Fiber. Finally, the workInProgress Fiber is switched to current Fiber.

render

//ReactDOMLegacy.js
export function render(
  element: React$Element<any>,//jsx object
  container: Container,//Mount dom
  callback: ?Function,//Callback
) {
  
  return legacyRenderSubtreeIntoContainer(
    null,
    element,
    container,
    false,
    callback,
  );
}

You can see what render does, that is, call legacyRenderSubtreeIntoContainer. This function will be explained in the next chapter. Here we focus on reactdom Three parameters when render () is used.

component

//ReactBaseClasses.js
function Component(props, context, updater) {
  this.props = props;//props attribute
  this.context = context;//Current context
  this.refs = emptyObject;//ref mounted object
  this.updater = updater || ReactNoopUpdateQueue;//Updated object
}

Component.prototype.isReactComponent = {};//Indicates classComponent

In the component function, props, context, refs, updater, etc. are mainly mounted on the current instance, so these can be obtained on the instance of the component. The main bearer structure of the update is updater, which mainly focuses on isReactComponent, which is used to indicate that this component is a class component

Summary: jsx is react The syntax of createElement is sugar, and jsx is transformed into react through babel CreateElement function, react After the createElement is executed, it returns a jsx object, also known as virtual dom. The Fiber will compare the jsx object with the current Fiber to form a workInProgress Fiber

pureComponent is also very simple, similar to component. It will inherit the prototype and assign isPureReactComponent

function PureComponent(props, context, updater) {
  this.props = props;
  this.context = context;
  this.refs = emptyObject;
  this.updater = updater || ReactNoopUpdateQueue;
}

const pureComponentPrototype = (PureComponent.prototype = new ComponentDummy());
pureComponentPrototype.constructor = PureComponent;
Object.assign(pureComponentPrototype, Component.prototype);
pureComponentPrototype.isPureReactComponent = true;

export {Component, PureComponent};