虚拟DOM 相关解释

vdom-diff

实现原理

通过 JavaScript对象来描述真实DOM

我们通过@babel/plugin-transform-react-jsx 这个babel插件来完成这一步

Example

React

In

const profile = (
  <div>
    <img src="avatar.png" className="profile" />
    <h3>{[user.firstName, user.lastName].join(' ')}</h3>
  </div>
);

Out

const profile = React.createElement("div", null,
  React.createElement("img", { src: "avatar.png", className: "profile" }),
  React.createElement("h3", null, [user.firstName, user.lastName].join(" "))
);

更多详情请移步 @babel/plugin-transform-react-jsx

或者你也可以通过 ES6的class关键字来来描述DOM, 例子如下:

class Element {
  type: string;
  props: Object<any>;
  children: Array<any>;

  constructor(type: stirng, props: Object<any>, children: Array<any>) {
    this.type = type;
    this.props = props;
    this.children = children;
  }
}

渲染真实DOM

createElement()

The javascript virtual dom renders to the HTML real dom.

if (isString(node)) {
    return document.createTextNode(node + '');
  }
  const el = document.createElement(node.type);
  setProps(el, node.props || {});
  node.children &&
    node.children.map(createElement).forEach(el.appendChild.bind(el));

  return el;

Diff twice virtual dom

function diff(oldNode, newNode) {
  if (!oldNode) {
    return { type: CREATE, newNode };
  }

  if (!newNode) {
    return { type: REMOVE };
  }

  if (changed(oldNode, newNode)) {
    return { type: REPLACE, newNode };
  }

  if (oldNode.type !== newNode.type) {
    return {
      type: UPDATE,
      props: diffProps(oldNode.props, newNode.props),
      children: diffChildren(oldNode.children, newNode.children)
    };
  }
}

Patch twice virtual dom

function patch(parent, patches, index = 0) {
  if (!patches) {
    return;
  }
  const el = parent.children[index];

  switch (patches.type) {
    case CREATE: {
      const { newNode } = patches;
      const newEl = document.createElement(newNode);
      return parent.appendChild(newEl);
    }
    case REMOVE: {
      return parent.removeChild(el);
    }
    case REPLACE: {
      const { newNode } = patches;
      const newEl = createElement(newNode);
      return parent.replaceChild(newEl, el);
    }
    case UPDATE: {
      const { props, children } = patches;
      patchProps(el, props);
      children.forEach((child, idx) => {
        patch(el, child, idx);
      });
    }
  }
}

Demo

Link

参考

React Diffing 算法

React's diff algorithm - Christopher Chedeau

React Dom Diff

virtual-dom

How to write your own Virtual DOM

Under-the-hood-ReactJS

babel-plugin-transform-react-jsx