技术解析

关于 js 的声明式 UI,我有一个大胆的想法
0
2021-06-09 14:08:31
idczone

接触了不少声明式 UI 的框架,Flutter 封装好的 widget 数量多,但是自己封装要写很多模版 state 代码,嵌套也不好看; Swift UI 好看易用,modifier 很强大,但又缺少一些灵活性; React 写起来很舒服,但是又带来了许多额外的概念,jsx 的语法还需要额外编译,都不能尽善尽美。 于是我写了一个小 demo,试图将这几个框架的优点结合起来,暂时将其命名为 Mox 。 先上一段代码:

const app = State((state) => () => {
  const times = state(0);
  return Flex(
    Div(times.value), 
    Div("click me")
      .on("click",times.setValue(o=>o+1))
    .flexFlow("column")
});

new Mox().Render("app", app);

(缝合怪石锤了) 大致的想法就是通过函数参数组合子组件,通过 modifier(.styles()、.on()等)组合样式、props 和事件,再搭配几个高级组件如 State 、Element 等获取响应式变量和 dom 元素。不得不说 js 实在是太灵活了,本来打算用 TS 写的,写着写着就停不下来了。 因为目前只是 demo,所以没有考虑 render 的性能和父子组件通信的问题,reRender 函数直接就整个全部重新渲染了

数据地带为您的网站提供全球顶级IDC资源
在线咨询
专属客服