How to use React diff algorithm

This time I will show you how to use the React diff algorithm and what are the precautions for using the React diff algorithm. The following is a practical case, let's take a look.

Preface

In the previous article, we have implemented the component function of React. From a functional perspective, we have implemented React core functions.

But our implementation has a big problem: every update requires re-rendering the entire application or the entire component, and DOM operations are very expensive, resulting in a huge performance loss.

In order to reduce DOM updates, we need to find the parts that really changed before and after rendering, and only update this part of the DOM. The algorithm that compares changes and finds out the parts that need to be updated is called the diff algorithm.

Comparison Strategy

After the previous two articles, we implemented a render method that can render virtual DOM into real DOM , we need to improve it now so that it no longer stupidly re-renders the entire DOM tree, but finds out the parts that really changed.

Many React-like frameworks implement this part in different ways. Some frameworks will choose to save the last rendered virtual DOM, and then compare the changes before and after the virtual DOM to obtain a series of updated data, and then These updates are applied to the real DOM.

But there are also some frameworks that choose to directly compare the virtual DOM and the real DOM, so that there is no need to save the last rendered virtual DOM and can be updated while comparing. This is also the method we choose.

Whether it is DOM or virtual DOM, their structure is a tree. The time complexity of the algorithm that completely compares the changes between the two trees is O(n^3), but considering that we rarely cross levels Move the DOM, so we only need to compare changes at the same level.

Only need to compare nodes in the same color box

In short, our diff algorithm has two principles:

1. Compare the current real DOM and virtual DOM, and directly update the real DOM during the comparison process

2. Only compare changes at the same level

We need to implement a diff method, which is used to compare the real DOM and the virtual DOM, and finally return the updated DOM

/**
 * @param {HTMLElement} dom 真实DOM
 * @param {vnode} vnode 虚拟DOM
 * @returns {HTMLElement} 更新后的DOM
 */
function diff( dom, vnode ) {
  // ...
}

The next step is to implement this method.

Before this, let’s recall the structure of our virtual DOM:

The structure of virtual DOM can be divided into three types, representing text, native DOM nodes and components respectively.

// 原生DOM节点的vnode
{
  tag: 'p',
  attrs: {
    className: 'container'
  },
  children: []
}
// 文本节点的vnode
"hello,world"
// 组件的vnode
{
  tag: ComponentConstrucotr,
  attrs: {
    className: 'container'
  },
  children: []
}

Compare text nodes

First consider the simplest text node. If the current DOM is a text node, update the content directly, otherwise Just create a new text node and remove the original DOM.

// diff text node
if ( typeof vnode === 'string' ) {
  // 如果当前的DOM就是文本节点，则直接更新内容
  if ( dom && dom.nodeType === 3 ) {  // nodeType: https://developer.mozilla.org/zh-CN/docs/Web/API/Node/nodeType
    if ( dom.textContent !== vnode ) {
      dom.textContent = vnode;
    }
  // 如果DOM不是文本节点，则新建一个文本节点DOM，并移除掉原来的
  } else {
    out = document.createTextNode( vnode );
    if ( dom && dom.parentNode ) {
      dom.parentNode.replaceChild( out, dom );
    }
  }
  return out;
}

The text node is very simple. It has no attributes and no child elements, so the result can be returned directly after this step.

Compare non-text DOM nodes

If vnode represents a non-text DOM node, then there are several situations:

If the types of the real DOM and the virtual DOM are different, for example, the current real DOM is a p, and the value of the vnode tag is 'button', then the original p has no use value, and a new button element is created directly. , and move all the child nodes of p under button, and then use the replaceChild method to replace p with button.

if ( !dom || dom.nodeName.toLowerCase() !== vnode.tag.toLowerCase() ) {
  out = document.createElement( vnode.tag );
  if ( dom ) {
    [ ...dom.childNodes ].map( out.appendChild );  // 将原来的子节点移到新节点下
    if ( dom.parentNode ) {
      dom.parentNode.replaceChild( out, dom );  // 移除掉原来的DOM对象
    }
  }
}

If the real DOM and the virtual DOM are of the same type, then we don’t need to do anything else for the time being, we just need to wait for the comparison of attributes and comparison of child nodes later.

Compare attributes

In fact, the diff algorithm not only finds changes in node types, it also finds out the attributes and events of nodes Listen for changes. We separate the contrast attribute as a method:

function diffAttributes( dom, vnode ) {
  const old = dom.attributes;  // 当前DOM的属性
  const attrs = vnode.attrs;   // 虚拟DOM的属性
  // 如果原来的属性不在新的属性当中，则将其移除掉（属性值设为undefined）
  for ( let name in old ) {
    if ( !( name in attrs ) ) {
      setAttribute( dom, name, undefined );
    }
  }
  // 更新新的属性值
  for ( let name in attrs ) {
    if ( old[ name ] !== attrs[ name ] ) {
      setAttribute( dom, name, attrs[ name ] );
    }
  }
}

For the implementation of the setAttribute method, please refer to the first article

Compare child nodes

The comparison of the node itself is completed, and the next step is to compare its child nodes.

这里会面临一个问题，前面我们实现的不同diff方法，都是明确知道哪一个真实DOM和虚拟DOM对比，但是子节点是一个数组，它们可能改变了顺序，或者数量有所变化，我们很难确定要和虚拟DOM对比的是哪一个。

为了简化逻辑，我们可以让用户提供一些线索：给节点设一个key值，重新渲染时对比key值相同的节点。

// diff方法
if ( vnode.children && vnode.children.length > 0 || ( out.childNodes && out.childNodes.length > 0 ) ) {
  diffChildren( out, vnode.children );
}

function diffChildren( dom, vchildren ) {
  const domChildren = dom.childNodes;
  const children = [];
  const keyed = {};
  // 将有key的节点和没有key的节点分开
  if ( domChildren.length > 0 ) {
    for ( let i = 0; i < domChildren.length; i++ ) {
      const child = domChildren[ i ];
      const key = child.key;
      if ( key ) {
        keyedLen++;
        keyed[ key ] = child;
      } else {
        children.push( child );
      }
    }
  }
  if ( vchildren && vchildren.length > 0 ) {
    let min = 0;
    let childrenLen = children.length;
    for ( let i = 0; i < vchildren.length; i++ ) {
      const vchild = vchildren[ i ];
      const key = vchild.key;
      let child;
      // 如果有key，找到对应key值的节点
      if ( key ) {
        if ( keyed[ key ] ) {
          child = keyed[ key ];
          keyed[ key ] = undefined;
        }
      // 如果没有key，则优先找类型相同的节点
      } else if ( min < childrenLen ) {
        for ( let j = min; j < childrenLen; j++ ) {
          let c = children[ j ];
          if ( c && isSameNodeType( c, vchild ) ) {
            child = c;
            children[ j ] = undefined;
            if ( j === childrenLen - 1 ) childrenLen--;
            if ( j === min ) min++;
            break;
          }
        }
      }
      // 对比
      child = diff( child, vchild );
      // 更新DOM
      const f = domChildren[ i ];
      if ( child && child !== dom && child !== f ) {
        if ( !f ) {
          dom.appendChild(child);
        } else if ( child === f.nextSibling ) {
          removeNode( f );
        } else {
          dom.insertBefore( child, f );
        }
      }
    }
  }
}

对比组件

如果vnode是一个组件，我们也单独拿出来作为一个方法:

function diffComponent( dom, vnode ) {
  let c = dom && dom._component;
  let oldDom = dom;
  // 如果组件类型没有变化，则重新set props
  if ( c && c.constructor === vnode.tag ) {
    setComponentProps( c, vnode.attrs );
    dom = c.base;
  // 如果组件类型变化，则移除掉原来组件，并渲染新的组件
  } else {
    if ( c ) {
      unmountComponent( c );
      oldDom = null;
    }
    c = createComponent( vnode.tag, vnode.attrs );
    setComponentProps( c, vnode.attrs );
    dom = c.base;
    if ( oldDom && dom !== oldDom ) {
      oldDom._component = null;
      removeNode( oldDom );
    }
  }
  return dom;
}

下面是相关的工具方法的实现，和上一篇文章的实现相比，只需要修改renderComponent方法其中的一行。

function renderComponent( component ) {
  
  // ...
  // base = base = _render( renderer );     // 将_render改成diff
  base = diff( component.base, renderer );
  // ...
}

完整diff实现看这个文件

渲染

现在我们实现了diff方法，我们尝试渲染上一篇文章中定义的Counter组件，来感受一下有无diff方法的不同。

class Counter extends React.Component {
  constructor( props ) {
    super( props );
    this.state = {
      num: 1
    }
  }
  onClick() {
    this.setState( { num: this.state.num + 1 } );
  }
  render() {
    return (
      <p>
        <h1>count: { this.state.num }</h1>
        <button onClick={ () => this.onClick()}>add</button>
      </p>
    );
  }
}

不使用diff

使用上一篇文章的实现，从chrome的调试工具中可以看到，闪烁的部分是每次更新的部分，每次点击按钮，都会重新渲染整个组件。

使用diff

而实现了diff方法后，每次点击按钮，都只会重新渲染变化的部分。

后话

在这篇文章中我们实现了diff算法，通过它做到了每次只更新需要更新的部分，极大地减少了DOM操作。React实现远比这个要复杂，特别是在React 16之后还引入了Fiber架构，但是主要的思想是一致的。

实现diff算法可以说性能有了很大的提升，但是在别的地方仍然后很多改进的空间：每次调用setState后会立即调用renderComponent重新渲染组件，但现实情况是，我们可能会在极短的时间内多次调用setState。

假设我们在上文的Counter组件中写出了这种代码

onClick() {
  for ( let i = 0; i < 100; i++ ) {
    this.setState( { num: this.state.num + 1 } );
  }
}

那以目前的实现，每次点击都会渲染100次组件，对性能肯定有很大的影响。

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

使用ES6中class模仿Vue做出双向绑定

怎样操作echarts节点显示动态数据

The above is the detailed content of How to use React diff algorithm. For more information, please follow other related articles on the PHP Chinese website!