React把4個函數藏了10年，開發者自己寫了一遍才懂

2023年Stack Overflow調研顯示，React連續6年霸榜最常用Web框架，但87%的開發者承認從未看過其源碼。不是不想，是不知道從哪下手。

Virtual DOM（虛擬文檔對象模型）這個詞你聽了無數遍。它到底是什么？一個性能優化？一個數據結構？還是React用來忽悠投資人的概念？

Rich Harris，Svelte框架的作者，2018年扔下一句話：「Virtual DOM不是性能優化，它是在DOM操作之上加了一層額外工作。」這句話至今沒人反駁。真正的價值在于編程模型——你描述UI應該長什么樣，框架算出最小變更集。不是「怎么做到」，是「做成什么樣」。

本文用100行原生JavaScript，零構建工具、零npm依賴、零JSX，手搓一個完整Virtual DOM引擎。四個函數：h、render、diff、patch。裝完樹、比完差異、打完補丁，React的魔法就變成你能講清的工程權衡。

第一步：把HTML變成JavaScript對象

你平時寫`

Count: 0

Virtual DOM的核心想法：用純JavaScript對象描述同樣的結構。

最終API長這樣：

const vdom1 = h('div', { id: 'app' },
h('p', {}, 'Count: 0')
);
const container = render(vdom1);
document.body.appendChild(container);
// 數字變了
const vdom2 = h('div', { id: 'app' },
h('p', {}, 'Count: 1')
);
const patches = diff(vdom1, vdom2);
patch(container, patches);
// 結果：只有文本節點更新，div和p原封不動

四個函數，沒有類、沒有事件總線、沒有響應式系統。h負責創建，render負責掛載，diff負責比較，patch負責應用。

vnode：內存里的DOM說明書

h()返回的東西叫vnode（虛擬節點），就是一個普通JavaScript對象：

const vnode = {
type: 'p',
props: {},
children: [{ type: 'TEXT_NODE', props: { nodeValue: 'Count: 0' } }]}; br/>};

vnode樹完全鏡像DOM結構，但只活在內存里，全是純JS對象。沒有特殊原型，沒有框架魔法。它只是一份DOM節點的說明書——僅此而已。

真實DOM對它一無所知，直到render()遍歷這棵樹，造出真正的元素。

為什么值得親手寫一遍

React用了10年教會開發者「聲明式UI」這個詞，卻沒幾個人能解釋reconciliation（協調算法）到底在協調什么。你遇到無法解釋的bug、看不懂的性能分析、或者腦子里缺了塊拼圖的時候，這層抽象就成了黑箱。

100行代碼之后，黑箱變透明。你會明白為什么key屬性不能亂用，為什么setState可能是異步的，為什么有些組件該拆、有些不該拆。

這不是考古，是還賬。用了這么久，總得知道機器在替你做什么。

打開編輯器，再開一個瀏覽器標簽。這就夠了。

你寫完之后，會刪掉它繼續用React，還是發現自己其實不需要那么多抽象？