关于 js 的声明式 UI，我有一个大胆的想法

[wheelg]

接触了不少声明式 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 函数直接就整个全部重新渲染了😂

现在看起来代码还很凌乱，因为可用的 modifier 还只有几个，等到抽成组件之后应该会好很多。

这样写的优势就在于整个项目只需要写 js 就行了，引入一个 scrip 文件就可以直接开始模块式开发，也不需要记多余的概念，modifier 都是几个 css 属性和 html 属性，最大的好处是可以直接展示和控制 css，直观的看出一个组件的作用，坏处可能是没有编辑器支持容易写错属性名称吧。

各位 V 友们有啥看法呢？放上 github 链接： https://github.com/Mox-js/Mox-js 目前这个 demo 连玩具都算不上，如果反响不好就全当练习虚拟 DOM 吧，又要去看 react 源码了...

[taowen]

https://github.com/Mox-js/Mox-js/blob/3e919654e83f62f039949b93584970b57fcf019d/src/utils/state.js#L10 这不就假设了全局只有一颗完全重渲染的树么。

[wheelg]

@taowen 是的，因为这里目前只是 demo，具体点重新渲染算法还没有写，暂时当作只有一颗树

[gowk]

另一个 Mithril.js ？

[SuperMild]

借楼宣传一下我的小框架
一个很像 Mithril.js 的前端框架
/t/758276

[agagega]

这不是 SwiftUI in JS 吗😂

[namelosw]

> React 写起来很舒服，但是又带来了许多额外的概念，jsx 的语法还需要额外编译，都不能尽善尽美。
> 于是我写了一个小 demo，试图将这几个框架的优点结合起来

你这个其实早就有差不多的了…

React 和类 React 的社区有些人一直是不用 JSX 的. 有的人直接用 createElement, 有的人抽了个叫 h('p'), 也有的人做成 html`<p></p>`, 这种一般叫 hyperscript.

参考:

https://github.com/hyperhype/hyperscript

https://github.com/developit/htm

[wheelg]

@namelosw 嗯，我了解过 hyperscript，也考虑过是不是基于 react 开发会更好，但是这样的话就没法没法用上修饰符了

[imkerberos]

今天被逼着写 VUE , CSS 布局都写吐了.... 想着如果有声明式的 UI 多好. 支持楼主好好做!

[gouflv]

可读性真的还是 jsx 好点，还有就是把样式函数化会显得耦合太多

[jiyinyiyong]

> reRender 函数直接就整个全部重新渲染了

没有增量更新方案, 那就是纯 Demo 了, 都没法玩啊.

这种写法, 属性多的话性能问题就需要担心了, React 那样至少一个调用完成, 多了也不会有明显的性能问题.
```
Div("click me")
.on("click",times.setValue(o=>o+1))
.flexFlow("column")
```

赶紧撸吧, 至少也要吧最基本的功能都堆上, 满足这边的例子 https://todomvc.com/

[wanguorui123]

不太喜欢声明式 UI，后期逻辑代码揉到 UI 里面，只会导致 UI 越来越混乱，可读性越来越差

[RickyC]

可是我喜欢 xml 布局。
其他的都不好玩。

[weixiangzhe]

flutter react swiftui 不都长得差不多吗

[aguesuka]

语法噪音太多了吧

[DICK23]

这种感觉和 Dart 写法也没啥区别啊，整合了状态

[myCupOfTea]

这种框架社区其实还挺多的