这次的更新主要是针对 diff 和 proxy
我一直追求一种【刚刚好】的状态,就是代码量缩减到最简,然后性能在崩坏的边缘不断试探
fre 就是一个这样的框架,你可以看到它只有300+行代码,却麻雀虽小,五脏俱全。
install
yarn add fre -S
复制代码
use
import{ observe, html, mount } from './src'
function counter() {
const data = observe({
count: 0
})
return html`
<div>
<h1>${data.count}</h1>
<button onclick=${() => {data.count++}}>+</button>
<button onclick=${() => {data.count--}}>-</button>
</div>
`
}
mount(html`<${counter} />`, document.body)
复制代码
proxy
proxy 大家应该都知道,是用来做劫持的,上个时代同样作用的是 Object.defineproperty
const data = observe({
count: {
num: 0
}
})
console.log(data) //{count:Proxy}
console.log(data.count) //{num:Proxy}
复制代码
proxy 有个很大的坑,就是默认只能劫持一层对象,多层嵌套就直接 gg
就和浅拷贝一样,它只能给第一层对象“加壳”
市面上的 proxy 的库都做了处理,比如 immer 通过递归浅拷贝,将深层嵌套的对象的 key 变成一层的(可以去看下源码)
这个过程的代码量还是有点大的其实
而 fre 却给出了一个更简单的递归方式,性能也会很好
keyed-diff-patch
这次 diff 的更新,其实还是很坑的,我到现在都有点捋不顺 其实 react 的那种方案比较容易理解了,diff 仅仅是两个 vnode 的事情,我不需要额外关心
preact 的方案比较难理解,尤其是加了 keyed 后,可以说正常人真的理解不了::>_<::
我是正常人,我没理解::>_<::
keyed-diff-patch,就是,如果孩子被 keyed 了,然后就会存到内存里,下次直接取出来用
这也是 react 为什么遍历的时候最好要加唯一的 key 的原因了
fre 给出来一个最小实现,同时完成度还不算低
todo……
下一步要做什么呢,我觉得现在的 fre 完成度已经可以了,可以用于一些小项目了
要说下一步要搞的大机制的话,我是挺想研究研究 time slicing 的,争取研究个最小实现,不要 fiber
fre 官网:fre.js.org
fre github:github.com/132yse/fre
欢迎试用与 star !