VirtualDom: patch関数の設計

patch関数の設計をコードベースで理解しよう

patch関数でやりたいこと

-> vnodeの比較

vnode1: 変更前

vnode2: 変更後

初回は vnode1 がない

patch関数での処理の内容

mount: 初回(vnode2からdom生成)

patch: vnode1と vnode2 の差分更新

patch と mount をまとめて process という名前で呼ぶことにする

code: ts

const patch(

n1: VNode | string | null,

n2: VNode | string,

container: HostElement

) => {

const { type } = n2

if (type === Text) {

processText(n1, n2, container)

} else {

processElement(n1, n2, container)

}

}

const processElement = (

n1: VNode | null,

n2: VNode,

container: HostElememt

) => {

if (n1 === null) {

mountElement(n2, container)

} else {

patchElement(n1, n2)

}

}

const processText(n1: string | null, n2: string, container: HostElement) {

if (n1 === null) {

mountText(n2, container)

} else {

patchText(n1, n2)

}

}