React源码

从零实现一个 Mini React

用不到两百行代码理解虚拟 DOM、调和过程与 Hooks 的关键约束。

2026年4月15日阅读约 15 分钟0 条评论

读懂一个框架最有效的方式之一，是实现一个足够小、但能跑通完整链路的版本。

从 createElement 开始

JSX 最终会变成普通对象。渲染器要做的第一件事，就是把这些对象转换成真实节点，并保存它们之间的关系。

function createElement(type, props, ...children) {
  return { type, props: { ...props, children } }
}

所谓调和，本质上是比较新旧两棵树，并把差异转成最小的 DOM 操作。