million - 高效优化 React 组件性能的工具

想要自动查找和修复性能问题吗？试试 Million Lint。

📚 阅读文档

🎦 观看视频

💬 加入我们的 Discord

🌐 在 Twitter 上关注我们

Million.js 是什么？

Million.js 是一个极快且轻量的优化编译器，可以使组件的性能提升最高 70%。

哦，天哪...又一个 /virtual dom|javascript/gi 框架？我对 React 已经很满意了，为什么我还需要这个？

Million.js 可以与 React 配合使用，并使协调过程更快。通过使用经过精心调优的优化虚拟 DOM，Million.js 减少了差异比较的开销（在这里试试看）

简而言之： 想象一下 React 组件以原生 JavaScript 的速度运行。

👉 几秒钟内设置 Million.js！→

安装

Million.js CLI 将自动为你安装软件包并配置项目。

npx million@latest

安装完成后，只需运行你的项目，相关信息就会显示在命令行中！

安装遇到问题？→ 查看安装指南

为什么选择 Million.js？

要理解为什么使用 Million.js，我们需要了解 React 如何更新界面。当应用程序的状态或属性发生变化时，React 会进行两个部分的更新：渲染和协调。

为了说明这一点，假设这是我们的 App：

function App() {
  const [count, setCount] = useState(0);
  const increment = () => setCount(count + 1);
  return (
    <div>
      <p>计数：{count}</p>
      <button onClick={increment}>递增</button>
    </div>
  );
}

在这个 App 中，当我点击按钮时，count 状态会更新，<p> 标签也会更新以反映新的值。让我们来分解一下这个过程。

渲染

第一步是渲染。渲染是生成当前组件快照的过程。你可以想象它就像简单地"调用" App 函数并将输出存储在一个变量中。这就是 App 快照的样子：

const snapshot = App();

// snapshot =
<div>
  <p>计数：1</p>
  <button onClick={increment}>递增</button>
</div>;

协调

为了更新界面以反映新的状态，React 需要比较前一个快照和新快照（称为"差异比较"）。React 的协调器会遍历前一个快照中的每个元素，并将其与新快照进行比较。如果元素相同，它会跳过；如果元素不同，它会更新。

<div> 标签相同，所以不需要更新。✅
- <p> 标签相同，所以不需要更新。✅
  - <p> 标签内的文本不同，所以需要更新。⚠️
- <button> 标签相同，所以不需要更新。✅
  - onClick 属性相同，所以不需要更新。✅
  - <button> 标签内的文本相同，所以不需要更新。✅

（总共：6 次差异检查）

<div>
-  <p>计数：0</p>
+  <p>计数：1</p>
  <button onClick={increment}>递增</button>
</div>

从这里我们可以看到，<p> 标签需要更新。然后 React 将更新 <p> DOM 节点以反映新的值。

<p>.innerHTML = `计数：${count}`;

Million.js 如何使这个过程更快

React 很慢。

React 协调的问题在于，随着 JSX 元素数量的增加，它的速度会指数级下降。对于这个简单的 App，它只需要对几个元素进行差异比较。但在真实的 React 应用中，你很容易有数百个元素，这会减慢界面更新的速度。

Million.js 通过完全跳过差异比较步骤并直接更新 DOM 节点来解决这个问题。

以下是 Million.js 协调器工作原理的概念示例：

function App() {
  const [count, setCount] = useState(0);
  const increment = () => setCount(count + 1);

  // 由编译器生成
  if (count !== prevCount) {
    <p>.innerHTML = `计数：${count}`;
  }

  <button>.onclick = increment;

  // ...
}

请注意，当"count"更新时，Million.js 将直接更新 DOM 节点。Million.js 将 React 协调的时间复杂度从 O(n)（线性时间）转变为 O(1)（常数时间）。

它有多快？→ 查看基准测试

资源与贡献

寻找文档？请查看文档或贡献指南。我们还建议阅读Virtual DOM: Back in Block以了解更多关于 Million.js 的内部原理。

想与社区交流？加入我们的 Discord，分享你的想法和用 Million.js 构建的项目。

发现 bug？请前往我们的问题追踪器，我们会尽力提供帮助。我们也非常欢迎 pull requests！

我们希望所有 Million.js 贡献者都遵守我们的行为准则。

→ 在 GitHub 上开始贡献

Alt

代码库

这个仓库是一个包含多个模块的"单体仓库"。Million.js 作为一个 NPM 包发布，但对更复杂且重要的扩展提供一流的模块支持。每个模块在 /packages 目录下都有自己的文件夹。

你也可以通过我们的路线图跟踪我们的进展。

模块	描述
`million`	包含 Million.js 核心的主要虚拟 DOM。
`react` / `react-server`	Million.js 的 React 兼容性。
`compiler`	Million.js 在 React 中的编译器。
`jsx-runtime`	Million.js 核心的简单 JSX 运行时。
`types`	包间共享的类型

赞助商

致谢

Million.js 深受以下项目的启发：

blockdom（Géry Debongnie）感谢 Géry 在虚拟 DOM 中开创"块"的概念。Million.js 代码库的许多部分直接或间接源自他的工作。
voby（Fabio Spampinato） Million.js 的"模板"概念源自 Voby 的 template() API。
Hack the Wave（Melinda Chang）提供的首页。
react 和 turbo 的文档。当前 Million.js 文档的许多部分都借鉴并修改自它们的文档。
ivi、Preact 以及更多

许可证

Million.js 是由 Aiden Bai 和贡献者们开发的 MIT 许可的开源软件：