nodeValue is the DOM Node property used to read or replace a text node’s character data. During virtual DOM reconciliation, compare the old and new text, then update the real DOM only when the value changed. section 8.2.1 section 8.2.4
A text-node patch follows three small responsibilities:
- Reuse the existing DOM element when the old and new virtual nodes are equal. section 8.2.4
- Read the old and new text values from the virtual nodes. section 8.2.4
- Assign the new text to el.nodeValue only when the values differ. section 8.2.4
Minimal text-node patch
function patchText(oldVdom, newVdom) { const el = oldVdom.el const { value: oldText } = oldVdom const { value: newText } = newVdom if (oldText !== newText) { el.nodeValue = newText } } section 8.2.4
Listing 8.9 Patching a text node (patch-dom.js)
function patchText(oldVdom, newVdom) {
const el = oldVdom.el
const { value: oldText } = oldVdom
const { value: newText } = newVdom
if (oldText !== newText) {
el.nodeValue = newText
}
}
Shows the focused patchText implementation that compares virtual-node text and updates the real text node. section 8.2.4
