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

圖片

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

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

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

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

圖片

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

圖片

小例子

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

圖片

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

圖片

一些語法

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

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

圖片

響應(yīng)式

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

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

圖片

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

Typescript 一些注意點(diǎn)

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

圖片

性能

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

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

圖片