前端的响应从未如此简单！渲染视图的写法也发生大变化！

前言

大家好，我是林三心，用最通俗易懂的话讲最难的知识点是我的座右铭，基础是进阶的前提是我的初心~

最近发现一个前端的有意思的框架，叫做 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 需要注意一些点