最近發(fā)現(xiàn)一個前端的有意思的框架，叫做 Dlight.js ，為啥說它有意思呢，主要是因為它的頁面渲染代碼編寫方式讓我感覺很有意思，咱們接著往下看。

圖片

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

可以看到這個前端框架的標語為 響應式從未如此簡單?。?/p>

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

看來是想顛覆 Vue、React 那種響應式的模式。

圖片

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

圖片

小例子

比如我們想渲染一個div 標簽，并且文本是 Hello world，其實非常簡單

圖片

如果你還想再給這個 div 標簽加上 class、id、點擊事件，可以通過 鏈式 的方式去進行調(diào)用渲染

圖片

一些語法

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

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

圖片

響應式

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

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

圖片

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

Typescript 一些注意點

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

圖片

性能

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

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

圖片