areNodesEqual decides whether two virtual DOM nodes can be treated as the same during reconciliation. If their types differ, replacement is required; element nodes must also have matching tags. section 8.2.2
The function applies a small set of equality checks:
- Return false when the nodes have different type properties. section 8.2.2
- For element nodes, compare their tag names; a changed tag requires destroying the old node and mounting a new one. section 8.2.2
- For component nodes, compare their tag properties, which identify the component prototype. section 12.1.1
- Return true for remaining same-type nodes under the simplified implementation. section 8.2.2
Console checks
Test two text nodes with identical or different text, an element and a text node, paragraph and div elements, and two paragraph elements with different content. The implementation separates different types and tags, while same-type non-element nodes reach the final true result. section 8.2.2
Listing 8.6 Comparing two nodes for equality (nodes-equal.js)
import { DOM_TYPES } from './h'
export function areNodesEqual(nodeOne, nodeTwo) {
if (nodeOne.type !== nodeTwo.type) { #1
return false
}
if (nodeOne.type === DOM_TYPES.ELEMENT) {
const { tag: tagOne } = nodeOne
const { tag: tagTwo } = nodeTwo
return tagOne === tagTwo #2
}
return true
}
The implementation listing shows the incremental decision structure: compare types, handle element tags, handle component prototypes, then apply the fallback. section 8.2.2
