Read the instructions

  • The preact version referenced for this article is 10.5.13
  • The article will omit most of the logic, such as hydrating, context, isSvg, etc. So be careful if any big shots come in.
  • Abbreviated version code

DiffElementNodes overview

  • Function: To compare various attributes of the parameter DOM, or to return a new DOM.
  • If there is no DOM on the oldVnode, it will be created according to the corresponding type
  • Handle props and children
    • NodeType ===null for text nodes to modify data directly to achieve DOM reuse modification
    • Non-text node: compares props, compares child nodes
function diffElementNodes( dom, newVNode, oldVNode, commitQueue, ) { let oldProps = oldVNode.props; let newProps = newVNode.props; let nodeType = newVNode.type; let i = 0; // props and children return dom; }Copy the code

Create a node

  • If there is no nodeType, text nodes are created by default. If there is no nodeType, text nodes are created by type
// If (dom == null) {if (nodeType === null) {return document.createTextNode(newProps); } dom = document.createElement( nodeType, newProps.is && newProps ); excessDomChildren = null; }Copy the code

Props and Children’s processing

  • The text node, a direct replacement for props.
  • Non-text node
    • Compare newProps with oldProps.

Text node

// Compare text nodes in children.js to create a new text node vNode, If (nodeType ===null) {if (oldProps! == newProps && dom.data ! == newProps) { dom.data = newProps; }}Copy the code

Non-text node

else { excessDomChildren = excessDomChildren && EMPTY_ARR.slice.call(dom.childNodes); oldProps = oldVNode.props || EMPTY_OBJ; diffProps(dom, newProps, oldProps, isSvg, isHydrating); i = newVNode.props.children; diffChildren( dom, Array.isArray(i) ? I: [I], newVNode, oldVNode, commitQueue, dom. FirstChild, // dom is the firstChild of oldVNode. if (excessDomChildren ! = null) { for (i = excessDomChildren.length; i--; ) { if (excessDomChildren[i] ! = null) removeNode(excessDomChildren[i]); }}}Copy the code