preface

The current technology stack of the company is still mainly React. After reading a lot of JD, it is required to have an understanding of the source code and even to be able to write simple source code implementation

Initialize the React project

  1. cnpm i create-react-app -g
  2. create-react-app myReact
  3. Delete all irrelevant files except entry files

4. My React version is 17.0.2

  • 4.1 JSX compilations after 17 no longer generate React. CreateElement
  • Import {JSX} from “react/jsx-runtime” JSX () instead of createElement “react”;
  • 4.3 Script disables JSX () because it implements the createElement method itself

  • 4.4 NPM run eject Trap, do not perform eject configuration because react17 changed JSX conversion rules. Set DISABLE_NEW_JSX_TRANSFORM=true in script To disable JSX (), but it will continue to disable JSX () after the popup configuration is not successful packaging error (also left a pit, I did not find why the popup will continue to disable JSX after the failure)

The React. The createElement method implementation

  1. CreateElement method effect

    Generate a VDOM for the render argument

  2. Determine the createElement entry parameter

Babel compilation tool

  1. CreateElement method of ginseng
  • Type: indicates the label type
  • Props: Tag properties and children elements
  1. The createElement method process
* @param type * @param config element * @param children element */ function createElement(type, config, {// config let props = {... config }; // Determine the length of the method input parameter, / / is more than 3 existing child element (labeled child elements) if (the arguments) length > 3) {/ / for children children = Array. Prototype. Slice. The call (the arguments, 2); } props.children = children; return { type, props, }; } const React = { createElement }; export default React;Copy the code

The React. The realization of the render

  1. Train of thought
  • Vdom becomes real DOM
  • The virtual DOM attributes are synchronized to the real DOM
  • Recursive childrenDom
  • Append to the target container
  1. The implementation process
  • What the Render method does is convert the VDOM to the real DOM
/** * function render(vdom, Transformation of the container) {/ / vdom real DOM DOM = const function (vdom) {/ / vdom types: string, number, if direct return text node (typeof vdom = = = "string" | | typeof Vdom === "number"){document.createTextNode(vdom)} // The react element returns the corresponding tag let {type, props} = vdom; let dom = document.createElement(type); / / for dom style style, judging the className / / props. If children types (typeof props. The children = = = "string" | | typeof props. The children = = = "Number"){//children are props. TextContent = props. Children; }else if (typeof props. Children === "object" && functions.children. Type) {//children is also a vdom // recursive render, and the target container becomes the append itself render(props.children, dom); } else if (array.isarray (props. Children)) {// render(); } return dom; }; container.appendChild(dom); }Copy the code

Calls to render, reateElement

import ReactDOM from "./react-dom";

ReactDOM.render(
  React.createElement(
    "div",
    {
      className: "title",
      style: {
        color: "red",
      },
    },
    React.createElement("span", null, "hello"),
    "world"
  ),
  document.getElementById("root")
);

Copy the code

The effect

Git git

Finally, if you find this article helpful, please remember to like three times oh, thank you very much