前端的響應從未如此簡單!渲染視圖的寫法也發生大變化!
最近發現一個前端的有意思的框架,叫做 Dlight.js ,為啥說它有意思呢,主要是因為它的頁面渲染代碼編寫方式讓我感覺很有意思,咱們接著往下看。
圖片
官網地址:https://dlight.dev/
可以看到這個前端框架的標語為 響應式從未如此簡單!!
沒有 ref(),沒有 useState(),沒有 createSignal(),沒有$標記的衍生 state,沒有 memo。想要一個 state?直接設一個屬性!想要一個衍生 state?直接設另一個屬性!擔心冗余計算或重新渲染?放心,這絕對不會發生!
看來是想顛覆 Vue、React 那種響應式的模式。
圖片
可以看出狀態、視圖 的代碼是寫到一個地方中的,并且試圖的渲染是使用 鏈式 的方式去調用渲染的,這讓我想到了 鴻蒙 ArkTS 的寫法,有點類似哦~
圖片
小例子
比如我們想渲染一個div 標簽,并且文本是 Hello world,其實非常簡單
圖片
如果你還想再給這個 div 標簽加上 class、id、點擊事件,可以通過 鏈式 的方式去進行調用渲染
圖片
一些語法
你可以在渲染的代碼塊中,使用一些 JavaScript 的語句,去決定你最終渲染出來的頁面效果,比如:
- if 語句,這樣你就可以不用寫三目運算
- for 語句,當你需要循環渲染某一個列表時
圖片
響應式
響應式從未如此簡單! 那么到底 Dlight.js 響應式的使用有多么簡單呢?
只需要你在類里聲明一個屬性即可,當你渲染的時候使用到了,它會自動收集依賴,并且變為一個響應式變量!!!是不是很簡單,不需要 ref、useState,就是這么簡單。
圖片
如果你想要給一個組件傳入 props,也很簡單,只需要使用 @Prop 來接收即可。
Typescript 一些注意點
在 Dlight.js 中一個 @View 的類就可以當做一個組件來使用,但是你在使用的時候又不需要 new 關鍵字來生成實例,而是可以直接使用,所以可能在 typescript 需要注意一些點。
圖片
性能
據說這個框架的性能跟 solid.js 一樣優秀。
大家如果好奇具體數據,可以去這個網站上看:https://krausest.github.io/js-framework-benchmark/current.html
圖片