React source code 5. JSX & core API

Video courses (efficient Learning) :Into the curriculum

Course Contents:

1. Introduction and questions

2. React design philosophy

React source code architecture

4. Source directory structure and debugging

5. JSX & core API

Legacy and Concurrent mode entry functions

7. Fiber architecture

8. Render phase

9. The diff algorithm

10. com MIT stage

11. Life cycle

12. Status update process

13. Hooks the source code

14. Handwritten hooks

15.scheduler&Lane

16. Concurrent mode

17.context

18 Event System

19. Write the React mini

20. Summary & Answers to interview questions in Chapter 1

21.demo

What is the Virtual Dom

This is the result of react.createElement (), which is used to render the dom of the updated object

Virtual Dom is a programming method that is stored in memory as objects that describe the essential information about our Dom, and synchronizes it with the real Dom using modules like React-DOM, a process also called reconciler, declaratively rendering the corresponding UI states. In React, the component tree is stored as a Fiber tree, and the dom can be incrementally rendered during updates, so Fiber is part of the Virtual DOM implementation

Why virtual Dom

A large number of DOM operations are slow, and even small updates may cause page rearrangement. Js objects are better than in memory and can be processed faster. Diff algorithm can be used to compare the differences between the old and new Virtual DOM, and batch, asynchronous and minimal dom changes can be implemented to improve performance

In addition, it can be cross-platform. JSX –> ReactElement object –> real node. With the existence of the middle layer, corresponding processing can be carried out before the operation of real node, and the result of processing can be reflected on the real node, which can be browser environment or Native environment

Is Virtual Dom really fast? In fact, virtual Dom is only fast when updated, not necessarily fast when the application is started

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

jsx&createElement

JSX allows declarative description of views to improve development efficiency. Babel can be converted into a syntax sugar for react.createElement (), which is also an extension of JS syntax.

JSX is the return value of the Render or FunctionComponent function of the ClassComponent, which represents the contents of the component. After compiling with Babel, it will compile to react.createElement. This is why JSX files declare ‘React from’ React ‘(not imported after React17). You can check the Babel JSX compilation site to see if JSX is compiled

The react. createElement source does a few things

Process config and assign the other config to props except for the reserved properties
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) {
    // Handle config and assign the other config to props except for the reserved properties
    / /...
  }

  const childrenLength = arguments.length - 2;
  // assign to props. Children
  / /...

  / / defaultProps processing
  / /...

  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 ReactElement

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

  return element;
};


Copy the code

Typeof represents the typeof the component. For example, in the source code, there is a function to check whether the Element is valid, which is the root object. Typeof represents the typeof the component. Typeof represents the typeof the component. For example, there is a function in the source code that checks whether it is a valid Element. Typeof === REACT_ELEMENT_TYPE determines this

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

If the component is ClassComponent, type is the class itself. If the component is created in FunctionComponent, type is the function. Source using ClassComponent. Prototype. IsReactComponent to distinguish between the two. Note that class or function components must be capitalized and not treated as normal nodes. Type is a string.

The JSX object has no priority, status, effectTag, etc. These tags are in the Fiber object. When the Fiber object is mounted, the Fiber object is constructed from the JSX object. When the JSX object is updated, the JSX object is compared to the current Fiber object. A new workInProgress Fiber was formed, and finally the workInProgress Fiber was changed into 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,
  );
}
Copy the code

Can see render legacyRenderSubtreeIntoContainer do is call, this function is explained in the next chapter, focus on ReactDom here. The render () when using three parameters.

component

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

Component.prototype.isReactComponent = {};// Indicates classComponent
Copy the code

The component function mounts props, Context, refs, updater, etc., on the current instance, so you can get these on the component instance. The updater is the main support structure for updating the isReactComponent. It is used to indicate that the component is a class component

Conclusion: React.createElement JSX is a syntax sugar for the react. createElement function, which is converted to the react. createElement function via Babel and returns a JSX object, also called virtual-dom. The workInProgress Fiber will be formed by comparing the JSX object with the Current Fiber

PureComponent is very simple, just like Component, it inherits the prototype and assigns the 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};
Copy the code

React source code 5. JSX & core API