Analysis of Diff algorithm: analysis of rendering process using React

This article brings you an analysis of the Diff algorithm: analysis of the rendering process using React, which has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

1. What is virtual DOM

In React, the result of render execution is not a real DOM node. The result is just a lightweight JavaScript object, which we call virtual. DOM.

• To put it simply, the so-called virtual DOM is actually the mapping of JavaScript objects to Html DOM nodes; that is, using JavaScript objects to represent the Html structure, and this object is the virtual DOM.

• Html:

  
• Item 1
  
• Item 2

• JavaScript Object Representation (virtual DOM)

{
  tagName: 'ul',
  props: {
    id: 'list'
  },
  children: [
    {tagName: 'li', props: {class: 'item'}, children: ["Item 1"]},
    {tagName: 'li', props: {class: 'item'}, children: ["Item 2"]},
  ]
}

2. When will it be generated into virtual DOM

• The React life cycle has three stages: loading, updating, and unloading; Attached is a React life cycle diagram

• As mentioned earlier: the result of render execution is not the real DOM node, the result is just a light A JavaScript object of magnitude, that is, a virtual DOM will be created when the render function is called;

class Tab extends React.Component {
    render() {
        React.createElement(
          'p',
          { className: 'class'},
          'Hello React'
        )
    }
}

• Create a virtual DOM through React.createElemen, and this function is only called in the Render function, so the virtual DOM will be generated during the loading and updating process of React; as for mounting to the real DOM, it is naturally ReactDom.render Function.

3. How to implement virtual DOM

• The implementation is actually very simple. The main thing is to define a function and form a React with the parameters we pass in. Element object, and type is the component type we pass in, which can be a class, function or string (such as 'p')

• React approximate source code:

function createElement(type, config, children) {
  let propName;

  const props = {};

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

  if (config != null) {
    if (hasValidRef(config)) {
      //  如果有ref，将它取出来
      ref = config.ref;
    }
    if (hasValidKey(config)) {
      //  如果有key，将它取出来
      key = '' + config.key;
    }

    self = config.__self === undefined ? null : config.__self;
    source = config.__source === undefined ? null : config.__source;
    
    for (propName in config) {
      if (
        hasOwnProperty.call(config, propName) &&
        !RESERVED_PROPS.hasOwnProperty(propName)
      ) {
        //  将除ref，key等这些特殊的属性放到新的props对象里
        props[propName] = config[propName];
      }
    }
  }

  //  获取子元素
  const childrenLength = arguments.length - 2;
  if (childrenLength === 1) {
    props.children = children;
  } else if (childrenLength > 1) {
    const childArray = Array(childrenLength);
    for (let i = 0; i 

• Print out the components:

4. Why do you need to use virtual DOM

• Historical stage of DOM management:

1. JS or jQuery operating DOM: When applications become more and more complex, it is necessary to use JS There are more and more fields maintained in it, and there are more and more DOM operations that need to monitor events and update the page during event callbacks. The application will become very difficult to maintain.

2. Later, the architectural patterns of MVC and MVP were produced, hoping to reduce the difficulty of maintenance through code organization. However, the MVC architecture cannot reduce the state of maintenance, nor does it reduce the update operations required on the page when updating the state. The DOM you need to operate still needs to be operated, just in a different place.

3. Since the corresponding DOM element needs to be operated when the state changes, why not make something to bind the view to the state, and the view will automatically change when the state changes. This is how people later came up with the MVVM pattern. As long as you declare in the template what state the view component is bound to, the two-way binding engine will automatically update the view when the state is updated;

4. But MVVM two-way data binding is not the only way. There is also a very intuitive way: once the state changes, use the template engine to re-render the entire view, and then replace the old view with the new view.

React adopts the fourth mode; but we all know that the cost of operating DOM is too high, while operating JavaScript is much faster, and Html DOM can be very simple Represented with JavaScript objects (Virtual DOM was born in this way)

This approach will cause a lot of problems. The biggest problem is that it will be very slow, because even a small Any state change requires the reconstruction of the entire DOM tree, which is too cost-effective; while React Virtual DOM adds some special operations during the state update process to avoid changes to the entire DOM tree.

related suggestion:

The above is the detailed content of Analysis of Diff algorithm: analysis of rendering process using React. For more information, please follow other related articles on the PHP Chinese website!