关于javascript:让-React-拥有更快的虚拟-DOM

Million.js 是一个十分疾速和轻量级的 (<4kb) 虚构 DOM。框架能够通过包装 React 组件来晋升性能（该框架目前版本只兼容 React 18 及以上版本）。

先说论断：Million.js 适应的场景极其无限，但在特定场景下也大放异彩。

如何应用

Million.js 集成 React 中应用非常简单。先进行装置和编译器配置。

装置与配置

npm install million

以后是 webpack 的配置文件。如果有应用其余的构建工具，能够自行参考 装置 Million.js。

const million = require('million/compiler');

module.exports = {
  plugins: [million.webpack(),
  ],
}

应用 block 和 For 组件

import {block as quickBlock} from "million/react";

// million block 是一个 HOC
const LionQuickBlock = quickBlock(function Lion() {return <img src="https://million.dev/lion.svg" />;});

// 间接应用
export default function App() {
  return (
    <div>
      <h1>mil + LION = million</h1>
      <LionQuickBlock />
    </div>
  );
}

以后是数组的状况下

import {block as quickBlock, For} from "million/react";

const RowBlock = quickBlock(function Row({ name, age, phone}) {
  return (
    <tr>
      <td>{name}</td>
      <td>{age}</td>
      <td>{phone}</td>
    </tr>
  );
});

// 应用 For 组件优化
export default function App() {
  return (
    <div>
      <For each={data}>
        {({adjective, color, noun}) => (
          <RowBlock 
            adjective={adjective}
            color={color} 
            noun={noun} 
          />
        )}
      </For>
    </div>
  );
}

Block Virtual DOM

Million.js 引入了 Block Virtual DOM 来进行优化。

Block Virtual DOM 采纳不同的办法进行比拟，能够分为两局部：

• 动态剖析（剖析虚构 DOM 以将 DOM 动静局部收集起来，放入 Edit Map 或者 edits（列表）中去）
• 脏查看（比拟状态（不是虚构 DOM 树）来确定产生了什么变动。如果状态发生变化，DOM 将间接通过 Edit Map 进行更新）

这种形式大部分状况下要比 React 的虚构 DOM 要快，因为它比拟数据而并非 DOM，将树遍历从 O(tree) 变为 Edit Map O(1)。同时咱们也能够看出 Million.js 也会通过编译器对本来的 React 组件进行批改。

实用场景

但所有的事件都不是相对的，Block Virtual DOM 在某些状况下甚至要比虚构 DOM 要慢。

动态内容多，动静内容少

block virtual DOM 会跳过 virtual DOM 的动态局部。

// ✅ Good
<div>
  <div>{dynamic}</div>
  Lots and lots of static content...
</div>

// ❌ Bad
<div>
  <div>{dynamic}</div>
  <div>{dynamic}</div>
  <div>{dynamic}</div>
  <div>{dynamic}</div>
  <div>{dynamic}</div>
</div>

稳固的 UI 树

因为 Edit Map 只创立一次，不须要在每次渲染时都从新创立。所以稳固的 UI 树是很重要的。

// ✅ Good
return <div>{dynamic}</div>

// ❌ Bad
return Math.random() > 0.5 ? <div>{dynamic}</div> : <p>sad</p>;

细粒度应用

初学者犯的最大谬误之一是到处应用 Block virtual DOM。这是个坏主意，因为它不是灵丹妙药。开发者应该辨认块虚构 DOM 更快的某些模式，并仅在这些状况下应用它。

规定

以下是一些要遵循的个别准则

• 嵌套数据：块非常适合出现嵌套数据。Million.js 将树遍历从 O(tree) 变为 O(1)，容许快速访问和更改。
• 应用 For 组件而不是 Array.map：For 组件会做针对性优化

• 应用前须要先申明：编译器须要进行剖析，没有申明将无奈进行剖析

  // ✅ Good
  const Block = block(<div />)
  
  // ❌ Bad
  console.log(block(<div />))
  export default block(<div />)

• 传递组件而不是 JSX

  // ✅ Good
  const GoodBlock = block(App)
  
  // ❌ Bad
  const BadBlock = block(<Component />)

• 确定的返回值：返回必须是“确定性的”，这意味着在返回稳固树的块开端只能有一个返回语句（组件库，Spread attributes 都有可能造成不确定的返回值而导致性能降落）

其余

million 源码中有十分多的缓存优化。同时在它最开始就拆分传入的 dom 节点，将其分成多个可变量，放入数组，patch 和 mount 时仅遍历数组数据比照（这也是须要确定的返回值起因），较为新鲜。源代码也较为简单明了。大家能够自行浏览源码学习。

• million react/block.ts
• million template.ts
• million block.ts .

million 的 Block Virtual DOM 的思路来源于 blockdom, blockdom 是一个较低级别的形象层。这个框架同时提供了制作框架的教程 制作本人的框架。

激励一下

如果你感觉这篇文章不错，心愿能够给与我一些激励，在我的 github 博客下帮忙 star 一下。

博客地址

参考资料

Million.js

blockdom