最近發(fā)現(xiàn)一個前端的有意思的框架，叫做 Dlight.js ，為啥說它有意思呢，主要是因?yàn)樗捻撁驿秩敬a編寫方式讓我感覺很有意思，咱們接著往下看。

圖片

官網(wǎng)地址：https://dlight.dev/

可以看到這個前端框架的標(biāo)語為 響應(yīng)式從未如此簡單！！

沒有 ref()，沒有 useState()，沒有 createSignal()，沒有$標(biāo)記的衍生 state，沒有 memo。想要一個 state？直接設(shè)一個屬性！想要一個衍生 state？直接設(shè)另一個屬性！擔(dān)心冗余計(jì)算或重新渲染？放心，這絕對不會發(fā)生！

看來是想顛覆 Vue、React 那種響應(yīng)式的模式。

圖片

可以看出狀態(tài)、視圖 的代碼是寫到一個地方中的，并且試圖的渲染是使用 鏈?zhǔn)?nbsp;的方式去調(diào)用渲染的，這讓我想到了 鴻蒙 ArkTS 的寫法，有點(diǎn)類似哦~

圖片

小例子

比如我們想渲染一個div 標(biāo)簽，并且文本是 Hello world，其實(shí)非常簡單

圖片

如果你還想再給這個 div 標(biāo)簽加上 class、id、點(diǎn)擊事件，可以通過 鏈?zhǔn)?nbsp;的方式去進(jìn)行調(diào)用渲染

圖片

一些語法

你可以在渲染的代碼塊中，使用一些 JavaScript 的語句，去決定你最終渲染出來的頁面效果，比如：

• if 語句，這樣你就可以不用寫三目運(yùn)算
• for 語句，當(dāng)你需要循環(huán)渲染某一個列表時

圖片

響應(yīng)式

響應(yīng)式從未如此簡單！ 那么到底 Dlight.js 響應(yīng)式的使用有多么簡單呢？

只需要你在類里聲明一個屬性即可，當(dāng)你渲染的時候使用到了，它會自動收集依賴，并且變?yōu)橐粋€響應(yīng)式變量！??！是不是很簡單，不需要 ref、useState，就是這么簡單。

圖片

如果你想要給一個組件傳入 props，也很簡單，只需要使用 @Prop 來接收即可。

Typescript 一些注意點(diǎn)

在 Dlight.js 中一個 @View 的類就可以當(dāng)做一個組件來使用，但是你在使用的時候又不需要 new 關(guān)鍵字來生成實(shí)例，而是可以直接使用，所以可能在 typescript 需要注意一些點(diǎn)。

圖片

性能

據(jù)說這個框架的性能跟 solid.js 一樣優(yōu)秀。

大家如果好奇具體數(shù)據(jù)，可以去這個網(wǎng)站上看：https://krausest.github.io/js-framework-benchmark/current.html

圖片