Teach you how to implement a react from html

Teach you how to implement a react from html

What is React

React is a simple javascript UI library for building efficient and fast user interfaces. It is a lightweight library and hence its popularity. It follows component design patterns, declarative programming paradigms, and functional programming concepts to make front-end applications more efficient. It uses virtual DOM to manipulate DOM efficiently. It follows a unidirectional data flow from higher-order components to lower-order components.

Preface📝

👉 We believe React is the preferred way to build fast, responsive and large-scale web applications in JavaScript. It performs well on Facebook and Instagram. Official website address

The concept of react is快速響應to large projects. For the new version of react 16.8, it brings a new concept fiber to solve the problems associated with fast response of web pages, that is, the bottleneck of CPU. Traditional web browsing is restricted by factors such as browser refresh rate and long js execution time, which will cause page frame drops and even freezes.

React avoids this problem due to its own underlying design, so the release of react16.8 only does three things for the front-end field: fast response, fast response, or TMD fast response! This article will start from an html, follow the fiber concept of react, and imitate a very basic react

Preparation work at the beginning🤖

html

We need an HTML to support the entire page and support the operation of react. Add <div></div> to the page, and then add a script tag. Because we need to use import for modular construction, we need to add the attribute of type module to the script.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div id="root"></div>
  <script type="module" src="./index.js" ></script>
</body>

</html>

It is recommended to install a Live Server plug-in, which will help us debug the code and will also be used in the following operations.

JavaScript

We will imitate the following react to implement a basic operation, bind the event to <input/> , and insert the input value into the <h2/> tag:

...
function App() {
  return (
    <div>
      <input onInput={updateValue} value={value} />
      <h2>Hello {value}</h2>
      <hr />
    </div>
  );
}
...

When React is compiled with Babel, JSX syntax is converted to React.createElement() . The above retuen code is converted to

...
React.createElement(
  "div",
  null,
  React.createElement("input", {
    onInput: updateValue,
    value: value,
  }),
  React.createElement("h2", null, "Hello", value),
  React.createElement("hr", null)
);
...

Online Address

From the converted code we can see that React.createElement supports multiple parameters:

  • type, node type
  • config, attributes on the node, such as id and href
  • children, child elements. There can be multiple child elements. The type can be simple text or React.createElement. If it is React.createElement, it is actually a child node, and there can be child nodes under the child node. In this way, the nested relationship of React.createElement is used to implement the tree structure of HTML nodes.

We can write a createElement that can achieve the same function in the form of React.createElement to display jsx through a simple data structure, namely虛擬DOM In this way, when updating, the comparison between new and old nodes can also be converted into a comparison of virtual DOM.

{
  type:'node label',
  props:{
    props:'Properties on the node, including events, classes...',
    children:'child nodes of the node'
  }
}

Here we can write a function to achieve the following requirements

  • The principle is to return all parameters to an object
  • Children should also be put into props, so that we can get the child elements through props.children in the component
  • When the child component is a text node, it is represented by constructing a node type of type TEXT_ELEMENT
/**
 * Create a virtual DOM structure * @param {type} tag name * @param {props} property object * @param {children} child nodes * @return {element} virtual DOM
 */
const createElement = (type, props, ...children) => ({
  type,
  props: {
    ...props,
    children: children.map(child =>
      typeof child === "object"
        ? child
        : {
            type: "TEXT_ELEMENT",
            props: {
              nodeValue: child,
              children: [],
            },
          }
    ),
  },
});

React source code implementation of createElement

After implementing createElement , we can get the virtual DOM, but we still need render to render the code to the page. At this time, we need to process index.js , add input events, introduce createElement and render through import, pass in the compiled virtual DOM and root element of the page when rendering, and finally call executeRender . The page is rendered. When the page is updated, call executeRender again to update and render.

import {createElement,render} from "./mini/index.js";
const updateValue = e => executeRender(e.target.value);
const executeRender = (value = "World") => {
  const element = createElement(
    "div",
    null,
    createElement("input", {
      onInput: updateValue,
      value: value,
    }),
    createElement("h2", null, "Hello", value),
    createElement("hr", null)
  );
  render(element, document.getElementById("root"));
};

executeRender();

What is done when rendering?

before version

render function helps us add element to the real node. First, it accepts two parameters:

The root component is actually a JSX component, which is a virtual DOM returned by createElement.

The parent node is where we want to render this virtual DOM

Before React 16.8, rendering was done in the following steps:

  • Create a DOM node of element.type type and add it to the root element (special treatment for text nodes)
  • Add the props of the element to the corresponding DOM, handle the event specially, and mount it on the document (react17 adjusts it to be mounted on the container)
  • Add element.children loop to DOM node;

Get the virtual DOM and perform the above three steps recursively. The rendered page is similar to the following process

/**
 * Add virtual DOM to real DOM
 * @param {element} virtual DOM
 * @param {container} real DOM
 */
const render = (element, container) => {
  let dom;
  /*
      Processing nodes (including text nodes)
  */
  if (typeof element !== "object") {
    dom = document.createTextNode(element);
  } else {
    dom = document.createElement(element.type);
  }
  /*
      Processing properties (including event properties)
  */
  if (element.props) {
    Object.keys(element.props)
      .filter((key) => key != "children")
      .forEach((item) => {
        dom[item] = element.props[item];
      });
    Object.keys(element.props)
      .filter((key) => key.startsWith("on"))
      .forEach((name) => {
        const eventType = name.toLowerCase().substring(2);
        dom.addEventListener(eventType, nextProps[name]);
      });
  }
  if (
    element.props &&
    element.props.children &&
    element.props.children.length
  ) {
    /*
      Looping to add to DOM
  */
    element.props.children.forEach((child) => render(child, dom));
  }
  container.appendChild(dom);
};

after version (fiber)

When we finish writing the above code, we will find that this recursive call is problematic.

The above part of the work is officially called renderer by React. Renderer is a module that third parties can implement by themselves. There is also a core module called reconsiler. One of the major functions of reconsiler is the diff algorithm. It will calculate which page nodes should be updated, and then pass the virtual DOM of the nodes that need to be updated to the renderer. The renderer is responsible for rendering these nodes to the page, but it is synchronous. Once the rendering starts, all nodes and their child nodes will be rendered and the process will not end until it is completed.

There is an example in React's official presentation, which clearly shows the lag caused by this synchronous calculation:

When the DOM tree is large, the running time of the JS thread may be relatively long. During this time, the browser will not respond to other events because the JS thread and the GUI thread are mutually exclusive. The page will not respond when the JS is running. If this time is too long, users may see lag.

We can solve this problem in two steps.

  • Allows interruption of rendering work. If a higher priority job is inserted, the browser rendering will be temporarily interrupted. After the job is completed, the browser rendering will be resumed.
  • Break down the rendering work into small units;

Solution I introduces a new API

requestIdleCallback receives a callback that will be called when the browser is idle. Each call will pass in an IdleDeadline to get the current idle time. options can pass in the maximum waiting time. If the browser is not idle by the time, it will be forced to execute.

window.requestIdleCallback queues a function to be called during the browser's idle period. This enables developers to perform background and low-priority work on the main event loop without affecting delayed key events.

However, this API is still experimental and has poor compatibility, so React officially implemented its own set. This article will continue to use requestIdleCallback for task scheduling

// Next unit of work let nextUnitOfWork = null
/**
 * workLoop work loop function* @param {deadline} deadline*/
function workLoop(deadline) {
  // Should the work loop function be stopped? let shouldYield = false

  // If there is a next unit of work and there is no other work with higher priority, loop while (nextUnitOfWork && !shouldYield) {
    nextUnitOfWork = performUnitOfWork(
      nextUnitOfWork
    )

    // If the deadline is approaching, stop the work loop function shouldYield = deadline.timeRemaining() < 1
  }

  // Notify the browser that workLoop should be executed during idle time
  requestIdleCallback(workLoop)
}
// Notify the browser that workLoop should be executed during idle time
requestIdleCallback(workLoop)

// Execute unit events and return the next unit event function performUnitOfWork(nextUnitOfWork) {
  //TODO
}

Solution II Create the fiber data structure

The previous data structure of Fiber is a tree, where the children of the parent node point to the child nodes, but this pointer alone cannot achieve interruption and continuation. For example, I now have a parent node A, A has three child nodes B, C, and D. When I traverse to C, I am interrupted. When I start again, I actually don’t know which one to execute under C, because I only know C, and there is no pointer to its parent node, nor a pointer to its brothers.

Fiber transforms such a structure and adds pointers to the parent node and sibling nodes:

  • child refers to the child component
  • sibling points to sibling components
  • return points to the parent component

Each fiber has a link to its first child, next sibling, and its parent. This data structure allows us to more easily find the next work unit. Assuming A is a node hanging on the root, the rendering order of the fiber is also as follows:

  • Starting from the root, find the first child node A;
  • Find the first child node B of A
  • Find the first child node E of B
  • Find the first child node of E. If there is no child node, find the next sibling node. Find the sibling node F of E.
  • Find the first child node of F. If there is no child node and no sibling node, then find the next sibling node of its parent node, and find the sibling node C of the parent node of F.
  • Find the first child node of C, cannot find it, find the sibling node, D
  • Find the first child node of D, G
  • We search for the first child node of G, but cannot find it. We search for its sibling node, but cannot find it. We search for the sibling node of its parent node D, but cannot find it either. We continue to search for the sibling node of D's parent node, and finally find the root.
  • The root node has been found in the previous step, and the rendering is complete.

We use this data structure to implement a fiber

//Create the initial root fiber
 wipRoot = {
  dom: container,
  props: { children: [element] },
};
performUnitOfWork(wipRoot);

Then call performUnitOfWork to construct the entire fiber tree from top to bottom

/**
 * performUnitOfWork is used to perform tasks * @param {fiber} our current fiber task * @return {fiber} the next task fiber task */
const performUnitOfWork = fiber => {
  if (!fiber.dom) fiber.dom = createDom(fiber); // Create a DOM to mount it const elements = fiber.props.children; // All sibling nodes under the current element // If there is a parent node, mount the current node to the parent node if (fiber.return) {
    fiber.return.dom.appendChild(fiber.dom);
  }

  let prevSibling = null;
  /*
      Later in the code we will extract the logic here*/
  if (elements && elements.length) {
    elements.forEach((element, index) => {
      const newFiber = {
        type: element.type,
        props: element.props,
        return: fiber,
        dom: null,
      };
      // The parent's child points to the first child element if (index === 0) {
        fiber.child = newFiber;
      } else {
        // Each child element has a pointer to the next child element prevSibling.sibling = newFiber;
      }
      prevSibling = fiber;
    });
  }
  // First find the child element, if there is no child element, then find the sibling element // If there is no sibling element, then return to the parent element // Finally end at the root node // The traversal order is from top to bottom and from left to right if (fiber.child) {
    return fiber.child;
  } else {
    let nextFiber = fiber;
    while (nextFiber) {
      if (nextFiber.sibling) {
        return nextFiber.sibling;
      }
      nextFiber = nextFiber.return;
    }
  }
}

after version (reconcile)

currentRoot

Reconcile is actually a diff operation of the virtual DOM tree. It compares the fiber tree before and after the update. After obtaining the comparison result, only the DOM nodes corresponding to the changed fibers are updated.

  • Delete unnecessary nodes
  • Update modified nodes
  • Adding a new node

Added the currentRoot variable to save the fiber tree before the root node was updated, and added the alternate attribute to the fiber to save the fiber tree before the fiber was updated.

let currentRoot = null
function render (element, container) {
    wipRoot = {
        // Omit alternate: currentRoot
    }
}
function commitRoot () {
    commitWork(wipRoot.child)
    /*
        Change the direction of the fiber tree and replace the fiber tree in the cache with the fiber tree in the page
    */
    currentRoot = wipRoot
    wipRoot = null
}
  • If the new and old node types are the same, reuse the old node DOM and update props
  • If the types are different and the new node exists, create a new node to replace the old node
  • If the types are different, there is no new node, but there is an old node, delete the old node

reconcileChildren

  • Extract the logic of creating new fibers in performUnitOfWork to the reconcileChildren function
  • Compare the new and old fibers in reconcileChildren;

When comparing fiber trees

  • When the new and old fiber types are the same, keep the DOM,僅更新props，設置effectTag 為UPDATE ;
  • When the new and old fiber types are different and there are new elements創建一個新的dom 節點，設置effectTag 為PLACEMENT ;
  • When the new and old fiber types are different and the old fiber exists刪除舊fiber，設置effectTag 為DELETION
/**
 * Coordination child node * @param {fiber} fiber
 * @param {elements} fiber's child nodes */
function reconcileChildren(wipFiber, elements) {
  let index = 0; // Used to count the index value of child nodes let oldFiber = wipFiber.alternate && wipFiber.alternate.child; // Only generated when updating let prevSibling; // Previous sibling node while (index < elements.length || oldFiber) {
    /**
     * Traverse the child nodes* oldFiber determines whether it is an update trigger or the first trigger. When the update triggers, it is all the nodes under the element*/
    let newFiber;
    const element = elements[index];
    const sameType = oldFiber && element && element.type == oldFiber.type; // Whether the fiber type is the same/**
     * When updating* Same tag with different attributes, update the attributes*/
    if (sameType) {
      newFiber = {
        type: oldFiber.type,
        props: element.props, //Only update properties dom: oldFiber.dom,
        parent: wipFiber,
        alternate: oldFiber,
        effectTag: "UPDATE",
      };
    }
    /**
     * Different tags, that is, replace the tag or create a new tag*/
    if (element && !sameType) {
      newFiber = {
        type: element.type,
        props: element.props,
        dom: null,
        parent: wipFiber,
        alternate: null,
        effectTag: "PLACEMENT",
      };
    }
    /**
     * The node was deleted */
    if (oldFiber && !sameType) {
      oldFiber.effectTag = "DELETION";
      deletions.push(oldFiber);
    }

    if (oldFiber) oldFiber = oldFiber.sibling;
    // The parent's child points to the first child element if (index === 0) {
      // The first child of a fiber is its child wipFiber.child = newFiber;
    } else {
      // The other child nodes of fiber are sibling nodes of its first child node prevSibling.sibling = newFiber;
    }
    // Assign the newly created newFiber to prevSibling, so that it is convenient to add sibling nodes for newFiber prevSibling = newFiber;
    // Index value + 1
    index++;
  }
}

When committing, different rendering operations are performed according to the properties of effectTag on the fiber node

after version (commit)

In commitWork, the effectTag of the fiber is judged to handle the actual DOM operation.

  • When the effectTag of a fiber is PLACEMENT, it means that a new fiber is added and the node is added to the parent node.
  • When the effectTag of a fiber is DELETION, it means deleting the fiber and deleting the node of the parent node.
  • When the effectTag of a fiber is UPDATE, it means updating the fiber and the props properties.
/**
 * @param {fiber} virtual dom of fiber structure
 */
function commitWork(fiber) {
  if (!fiber) return;
  const domParent = fiber.parent.dom;
  if (fiber.effectTag === "PLACEMENT" && fiber.dom != null) {
    domParent.appendChild(fiber.dom);
  } else if (fiber.effectTag === "UPDATE" && fiber.dom != null) {
    updateDom(fiber.dom, fiber.alternate.props, fiber.props);
  } else if (fiber.effectTag === "DELETION") {
    domParent.removeChild(fiber.dom);
  }

  // Recursively operate child elements and sibling elements commitWork(fiber.child);
  commitWork(fiber.sibling);
}

At this point, let's focus on what happens updateDom . We get the new and old attributes that have been changed on the DOM and perform operations

/*
    isEvent: Get event attributes isProperty: Get non-node, non-event attributes isNew: Get the attributes that changed before and after*/
const isEvent = key => key.startsWith("on");
const isProperty = key => key !== "children" && !isEvent(key);
const isNew = (prev, next) => key => prev[key] !== next[key];


/**
 * Update dom properties * @param {dom} fiber dom
 * @param {prevProps} the old properties on fiber dom * @param {nextProps} the new properties on fiber dom */
function updateDom(dom, prevProps, nextProps) {
  /**
   * Convenient old attributes* 1. Get the event attributes starting with on* 2. Get the deleted events* 3. Cancel the monitoring of the deleted events*/
  Object.keys(prevProps)
    .filter(isEvent)
    .filter(key => !(key in nextProps))
    .forEach(name => {
      const eventType = name.toLowerCase().substring(2);
      dom.removeEventListener(eventType, prevProps[name]);
    });

  /**
   * Convenient old attributes* 1. Get non-event attributes and non-child node attributes* 2. Get deleted attributes* 3. Delete attributes*/
  Object.keys(prevProps)
    .filter(isProperty)
    .filter(key => !(key in nextProps))
    .forEach(key => delete dom[key]);

  /**
   * Convenient new attributes * 1. Get non-event attributes and non-child node attributes * 2. Get the attributes that changed before and after * 3. Add attributes */
  Object.keys(nextProps)
    .filter(isProperty)
    .filter(isNew(prevProps, nextProps))
    .forEach(name => {
      dom[name] = nextProps[name];
    });

  /**
   * Convenient new attributes * 1. Get the event attributes starting with on * 2. Get the event attributes that changed before and after * 3. Add a listener for the newly added event attributes */
  Object.keys(nextProps)
    .filter(isEvent)
    .filter(isNew(prevProps, nextProps))
    .forEach(name => {
      const eventType = name.toLowerCase().substring(2);
      dom.addEventListener(eventType, nextProps[name]);
    });
}

After completing a series of operations on the DOM, we render the newly changed DOM to the page. When the input event is executed, the page will be rendered again, but at this time it will enter the logic of updating the fiber tree.
Alternate points to the previous fiber node for reuse, and performs Update operations faster, as shown in the figure:

Mission accomplished!

The complete code can be found on my github.

Conclusion and summary 💢

in conclusion

  1. The JSX code we wrote was converted into React.createElement by babel.
  2. React.createElement actually returns the virtual DOM structure.
  3. The reconciliation and rendering of the virtual DOM can be simply and crudely recursive, but this process is synchronous. If too many nodes need to be processed, user input and animation playback may be blocked, causing lag.
  4. Fiber is a new feature introduced in 16.x, which is used to convert synchronous coordination into asynchronous one.
  5. Fiber transforms the structure of virtual DOM, with pointers such as parent->first child, child->brother, and child->parent. With these pointers, other nodes can be found from any Fiber node.
  6. Fiber splits the synchronous tasks of the entire tree into asynchronous execution structures that each node can execute independently.
  7. Fiber can start traversal from any node. The traversal is depth-first traversal in the order of parent->child->brother->parent, that is, from top to bottom and from left to right.
  8. The reconciliation phase of a fiber can be a small asynchronous task, but the commit phase must be synchronous. Because asynchronous commit may make users see nodes appear one after another, which is a bad experience.

Summarize

  • React hook implementation ✖
  • React Synthetic Events ✖
  • There are still many things that have not been realized 😤...

At this point, thank you for taking the time to read this article. I hope it will be helpful to you. If you have any questions, you are welcome to correct me. Due to work reasons, I have been writing this article intermittently for about a month. I am busy with a small program phone function based on騰訊云TRTC + websocket . I will write it into an article to share when I have time. Of course, the implementation of react will continue.

👋: Jump to github. Welcome to give a star. Thank you everyone.

References

🍑: Handwriting series-Realize a platinum-level React

🍑: build-your-own-react (highly recommended)

🍑: Hand-write React's Fiber architecture and deeply understand its principles

🍑: Hand-write a simple React

🍑: Teacher Dasheng from Miaowei Classroom wrote the fiber and hooks architecture of react

🍑: React Fiber Architecture

🍑: Hand-write a simple React

This is the end of this article about teaching you how to implement a react from html. For more relevant html implementation react content, please search 123WORDPRESS.COM’s previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!

You may also be interested in:
  • Two ways to use react in React html
  • How to remove HTML tags in rich text and filters in Vue, React, and WeChat applets
  • Do you know how to use React in HTML pages?

<<:  A brief discussion of four commonly used storage engines in MySQL

>>:  Solution to Nginx 500 Internal Server Error

Recommend

Tutorial on installing mysql5.7.18 on mac os10.12

I searched the entire web and found all kinds of ...

js canvas realizes random particle effects

This article example shares the specific code of ...

Analysis of the difference between the usage of left join setting conditions in on and where in mysql

This article uses examples to illustrate the diff...

A brief discussion on HTML ordered lists, unordered lists and definition lists

Ordered List XML/HTML CodeCopy content to clipboa...

Detailed explanation of how to configure the tomcat external server in HBuilderX to view and edit the jsp interface

1. The first method is to start the local tomcat ...

Windows Server 2016 Quick Start Guide to Deploy Remote Desktop Services

Now 2016 server supports multi-site https service...

Vue implements login jump

This article example shares the specific code of ...

Detailed tutorial on Docker pulling Oracle 11g image configuration

Without further ado Start recording docker pullin...

Detailed explanation of pipeline and valve in tomcat pipeline mode

Preface In a relatively complex large system, if ...

How to use Vue+ElementUI Tree

The use of Vue+ElementUI Tree is for your referen...

Summary of MySQL date and time functions (MySQL 5.X)

1. MySQL gets the current date and time function ...

js to achieve simple image drag effect

This article shares the specific code of js to ac...

Cross-browser local storage Ⅰ

Original text: http://www.planabc.net/2008/08/05/...

About MariaDB database in Linux

Table of contents About MariaDB database in Linux...

Using JS to determine the existence of elements in an array in ten minutes

Preface In front-end development, you often need ...