fre 更新了，框架設計重思考……

halo 你們好，很久不賤呢~

很久沒出來浪了::>_<::，主要是以前在重構 c站，如今重構完了

是時候重構一下俺的輪子了……

因此，如你所見，smox、fre、eplayer 都更新了

這篇文章，主要來講說，fre 框架的設計

Use

import { h, render, useState } from 'fre'

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

render(<Counter />, document.getElementById('root')) 複製代碼

這段代碼你們應該很熟悉啦，react hooks API 就是個奇蹟

而我，看到這種正常思惟根本想不出怎樣實現的 API 天生有種癡迷

本質

react hooks API 爲何難以實現，其實本質是 this 的缺失

若是這是 vue，咱們能夠經過依賴收集的時候，知道是哪一個組件，然而 react 並無

事實上，react 的 hooks 是存在於 fiber 的

原理

唉，一不當心又說到 fiber 了，好尷尬

fiber 網上的文章蠻多的，大多寫的都雲裏霧裏，對於 hooks 而言，其實關鍵在於 鏈表的遍歷

連表的遍歷和遞歸遍歷不同的是，鏈表可以一條鏈走完全部的節點

而遞歸的兄弟節點是斷連的

什麼意思，就是說，fiber 可以使得咱們走一遍，可以順序的拿到全部的 function 節點，而後，有個全局變量在更替，這個就是咱們要的 this 了

設計哲學

唔，上面說了一點點 hooks 內容，好像跑題了……

重點仍是框架設計哈！其實框架，是我的喜愛的不一樣搭配，僅此而已

	尺寸	組件化	狀態更新
fre	1kb	hooks	Fiber
preact	3kb	class	diff
vue	10kb	SFC	Proxy + diff
react	33kb	class + hooks	Fiber

以上，先看個表格，我立刻，要開始編做文了

組件化

對於一個框架來講，組件化是很重要的，好比 react 主要是 class 的方案，vue 是模板引擎和單文件，fre 是 function ……

首先，我是很不喜歡 vue 的 模板引擎的，這是真的

可是它也有好處，好比自帶 runtime，好比可以本身控制編譯，更方便的編譯到小程序，甚至我看到滴滴的 cml 框架直接用標籤搞了個多態協議（編譯時走指定標記內容）

可是談到設計，我仍是將它歸類爲無可救藥的組件化機制

而後就是 react 的 class 方案，瀏覽器支持，但也有缺點——

class 其實很難在 1kb 的框架裏搞定，主要是 class 有生命週期事件，還有 context 這種重頭，並且 class 的拓展形式比較絕望，HOC、render props、extend 等

而後就是 hooks API，它的優勢就是複用方便，function 一把鎖，並且 API 很魔幻 缺點就比較致命，不能拿到 this 致使不少事情都作不了，也沒有多餘的字符，搞編譯也不可能

要知道，國內的框架，到頭來都去搞多端編譯了都……

狀態更新

框架的另外一個要素，狀態更新機制，看圖

通過投票，能夠看到，最終剩下的，就 react 和 vue3 的方案

而我我的，超級喜歡騷的 API，因此天然是選擇了 proxy

固然 fre 是 fiber 了，因此其實不是我最喜歡的，可是也沒辦法，我第一個版本是使用 Proxy 搞的，後來發現，仍是和 react 保持一致的好……好抄

可是我確實最喜歡 Proxy 無疑，稍等我再說

vdom diff

單獨將 diff 拿出來講::>_<:: 其實咱們看到不少框架是沒有 diff 的，如 vue1.x，而後就是遞歸的 diff，如 preact、vue2.x

還有就是 react 的 fiber

其實呢，對於 vue 而言，確實 diff 的必要性不是很大，可是一樣的，對於 react 而言，fiber 的必要性也不大(⊙o⊙)…

因此，對於成熟的框架，這種機制只是一種必需品，用來高度抽象的，統一非瀏覽器環境的

因此若是寫一個框架，我以爲仍是必定要加一層 vdom 的

優先級調度

不得不提一下 react 的優先級的調度，通俗來講，就是它能擺脫瀏覽器的堆棧，高優先級任務必定執行，低優先級任務抽空執行

這個調度方案的實現，要麼依賴 fiber，要麼依賴 runtime

因此其實 react 和 vue 均可以作

可是我不喜歡 vue 的 runtime ，fiber 也一時半刻搞不定

唉，因此 fre 內部目前仍是 micro task

總結

綜上所述，fre 的各個方案，綜合起來看，其實只是擁有了一個完成度還算 ok 的 1kb

hooks API 當然騷，也奈何沒辦法多端編譯，後續發展是個問題

而 vue 的模板我又很不喜歡，我還想搞調度，因此……若是我想寫一個理想的框架，大概長這樣：

1. Proxy 的狀態更新方案，騷
2. class 的組件化方案，綜合考慮最好的組件化方案
3. 使用 web-component 做爲 runtime，搞調度
4. 擁有 vdom diff，使用 JSX

以上，是我對新框架的思考，我先不搞了，大家來呀！

最終，放上 fre 的 github 地址：

github.com/132yse/fre

歡迎 star 與 pr ::>_<::