million 介绍
Million 是2021.6 月的项目，至今4.2k star。
官网说它一个轻量级的 ( <1kb) 虚拟 DOM。它非常快，并且可以轻松创建用户界面。
Million 使创建用户界面像React一样简单，但为最终用户提供更快的性能和更小的包大小。通过使用编译器预先计算用户界面，Million 减少了传统 Virtual DOM 的开销。
Million 不依赖于 React，但它确实使用了别名，因此任何导入 fromreact都会自动别名为million. 这意味着您可以使用任何带有 Million 的 React 库而无需任何更改，并且您可以使用 Million 作为 React Vite 项目的替代品。
我个人觉得学习million之前首先要了解一下虚拟 dom 和 diff，因为这就是 million 主要在做的事情。
此外，官方文档是英文的，所以涉及官方文档的部分基本是我自己翻译的，如果有不通顺的地方，那是因为我暂时找不到更好的翻译方式。。。
什么是虚拟 DOM
virtual Dom是一种编程方式，它以对象的形式保存在内存中，它描述了我们dom的必要信息，并且用类似react-dom等模块与真实dom同步，这一过程也叫协调(reconciler)。
这种方式可以声明式的渲染相应的ui状态，让我们从dom操作中解放出来，在react中是以fiber树的形式存放组件树的相关信息，在更新时可以增量渲染相关dom，所以fiber也是virtual Dom实现的一部分。
接下来我们看看 million 的官方文档。
React 写法钩子
useList()
useList()钩子是钩子的优化版本。
useState()专门用于数组。它不是返回stateand setState，而是返回listand delta。
list是一个可以像变量一样更新的可变值，delta是一个可以传递到虚拟节点的有效负载。
语法： const [list, delta] = useList(initialListValue)
示例： const [list, delta] = useList([1, 2, 3])
文档中说这个钩子直接导出的delta使直接更新dom节点成为可能，那么我们就不需要再去做diff的工作了。
下面两张图是官网放的 react 更新dom和million更新 dom不同的流程：
useDelta()
该useDelta()钩子提供了一个接口来创建命令式操作并绕过虚拟 DOM 与Delta的差异。共有三种方法：create(index)、update(index)和remove(index)。
语法： const delta = useDelta()
示例： delta.remove(0)
虚拟 DOM
基础知识
# m()
语法： m(tag, props?, children?, flag?, delta?, hook?)
示例： m('div', { id: 'app' }, ['Hello World'])
使用m可以创建VNode。
它接受一个字符串形式的标签、一个可选的 props 对象、一个可选的孩子节点的数组和一个可选的 tag。
import { m } from 'million';
const vnode = m('div', { id: 'app' }, ['Hello World']);
{ tag: 'div', props: { id: 'app' }, children: ['Hello World'],}
tagName存储在tag下，attributes存储在props下，孩子节点存储在children下。
也可以输入 HTML，它会自动转换为 VNode。
使用 key 优化
大多数时候，diffing 和 patching 的过程已经足够快了, 但是当处理数量很多的子节点时, 最好提供key属性作为运行时的提示。
patch的时候,如果key属性修改了，那么million 只会diffprops和children。
{ tag: 'div', props: {}, children: ['Hello World'], key: 'foo',}
className 和 style 的 helpers
className和 style 属性需要使用className 和 style函数进行预处理。
className可以通过布尔值设置对应的class（有点像classnames库的用法）。
style支持对象写法。
