惊艳！33行代码实现React，揭秘其核心秘密

Oliver Russell，一位来自伦敦的 Python 工程师，最近进行了有趣的尝试，以 33 行代码“实现”了 React。由此可见，这个实现的功能还十分有限，仅涉及虚拟 DOM 生成、差异比较和真实 DOM 渲染。

def h(tag, props, *children):
    return {"tag": tag, "props": props or {}, "children": children}

def diff(a, b):
    if type(a) != type(b):
        return True
    if isinstance(a, dict):
        return a["tag"] != b["tag"] or diff(a["props"], b["props"]) or any(diff(c, d) for c, d in zip(a["children"], b["children"]))
    return a != b

def render(element, parent=None):
    if isinstance(element, str):
        return document.createTextNode(element)
    node = document.createElement(element["tag"])
    for name, value in element["props"].items():
        if name.startswith("on"):
            node.addEventListener(name[2:].lower(), value)
        else:
            node.setAttribute(name, value)
    for child in element["children"]:
        render(child, node)
    if parent:
        parent.appendChild(node)

这个实现参考了 Mithril，这是一个高度受 React 启发的最小 JavaScript 框架。Mithril 使用函数式编程范式，并依赖于虚拟 DOM 进行渲染。

让我们更深入地了解 React 的核心思想。React 使用虚拟 DOM，它本质上是真实 DOM 的一个轻量级表示。当状态发生变化时，React 会生成一个新的虚拟 DOM，然后将其与旧的虚拟 DOM 进行比较。只有发生变化的元素才会更新到真实 DOM 中，从而提高了渲染效率。

与 React 不同，Mithril 不使用虚拟 DOM。相反，它使用函数式编程范式来进行渲染。这使得 Mithril 代码更具可预测性，并且可以轻松地进行测试和维护。

Oliver Russell 的尝试为我们展示了如何使用最少的代码来实现 React 的核心思想。它让我们更好地理解了 React 的工作原理，以及虚拟 DOM 的重要性。