天官赐福，Fre2终于来了-技术圈

哇咔咔大家嚎！俺是132大弟弟！今天是个激动人心的日子，窝窝窝，终于！发布了 fre2 正式版！

代号：天官赐福

如图，因为大家发版都有代号的，所以！我也有！

其实有心的小伙伴也注意到了，我在知乎发的每一篇文章都有一个很色的顶图，今天的顶图是可爱的天子殿下和他家的血雨探花~ 为此，我还特地写了个字，虽然很丑，但是有爱鸭！

『天官赐福，百无禁忌』

fre2

fre 当年取名的时候，来自 free，如果 1.0 由代号的话，那肯定就是 free 了，凛遥一生推

它是一个 react like 的框架，400 多行代码实现了整个 react fiber 架构，同时在某些方面可以赶超 react，fre2 在 fre1 的基础上，带来了许多改进：

更好的 diff 算法

无疑这是 fre2 最重要的 feature，由于 fre 使用了链表的数据结构，它的遍历方式极为有限，很难在此基础上做算法

我尝试了三种不同的算法，比如 vue2 的算法（两端遍历），ivi 的算法（最长递增子序列），最终实现了一种适用于 fre 的算法，它支持异步渲染（集中绘制），也支持预处理，但它的遍历顺序是从左到右的

这是 fre2 的突破，要知道 react 还没有实现对等的算法，fre2 新算法的性能几乎可以和 vue3 持平

算法的具体细节，其实就是在原先 keymap 的基础上增加了预处理，这一点优化便可以提升很多性能

before
[ 1 2 3 4 ]
[ 1 3 2 4 ]

1 和 4 首尾相同，不需要进入 diff

after
[  2, 3 ]
[  3, 2 ]

更好的调度

时间切片是异步渲染的杀手锏，也可以说是 fre 和其他框架的本质区别，fre2 在 fre1 的基础上进行了抽象和调整

这部分内容特别适合 react 爱好者来查看源码，fre 的代码要好看得多

其中最重要的是 react 的新技术，被称为 react lanes，这是一组利用位运算替代数组标记的技术

https://github.com/facebook/react/pull/18796

比如一个 fiber 的 lanes 是这样的

0b001001

则代表这个 fiber 需要被同时渲染两次，而且是不同优先级

fre2 也对这种技术进行了尝试，将很多变量做成位运算的集合，对未来实现 Suspense 有意义

Fragment 支持

fragment 对于 css flex 布局是很必要的，fre1 对 fragment 的支持不完整，得益于 fre2 的新算法，fragment 也得到了良好支持

尝试一下

yarn add fre

import { render, useState } from 'fre'

function App() {
  const [count, setCount] = useState(0)
  return <>
      <h1>{count}</h1>
      <button onClick={() => setCount(count + 1)}>x</button>
    </>
}

render(<App />, document.body)

总结

很多人说我心态好，写的框架不温不火，没有大厂或大佬背书，我还能一直蹦跶

其实不是这样，我对很多东西有自己的判断，我知道前端框架已经不可能火了，哪怕是 vue3 也才 2w 个 star，不温不火已经成为事实

大家都开始寻找新思路，fre 不能给我带来收益，但我写 fre 的经验会帮助到我接下来开的坑

提前剧透一下，今年我会开一个新坑，是为了适应 IOT 时代而写的渲染引擎