天官赐福，Fre2终于来了

最新推荐文章于 2024-09-25 10:36:42 发布

落落落落克

最新推荐文章于 2024-09-25 10:36:42 发布

阅读量431

点赞数

文章标签：算法数据结构 java xhtml python

本文链接：https://blog.csdn.net/qq_34998786/article/details/114466024

版权

哇咔咔大家嚎！俺是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)