[开源] 将 react 的 hooks 和 组件化思路带入 go 的 TUI 开发。

[weixind]

最近想搞一搞 agent cli 开发。UI 层面，node 有比较成熟的 ink 方案。

但是看了下 go TUI 相关的解决方案，描述 UI 的方式有点别扭。当然可能是我没找到更好的实现思路。

所以实现了 rego ，取 react + go 的意思。

话不多说，先上代码。

package main

import (
    "fmt"
    "github.com/erweixin/rego"
)

func App(c rego.C) rego.Node {
    count := rego.Use(c, "count", 0)
    
    rego.UseKey(c, func(key rego.Key, r rune) {
        switch r {
        case '+': count.Set(count.Val + 1)
        case '-': count.Set(count.Val - 1)
        case 'q': c.Quit()
        }
    })
    
    return rego.VStack(
        rego.Text("Rego Counter").Bold(),
        rego.Text(fmt.Sprintf("Count: %d", count.Val)),
        rego.Spacer(),
        rego.Text("[+] 增加  [-] 减少  [q] 退出").Dim(),
    )
}

func main() {
    rego.Run(App)
}

运行效果：

Rego Counter
Count: 0

[+] 增加  [-] 减少  [q] 退出

仓库： https://github.com/erweixin/rego

对于多组件的使用可以参考： https://github.com/erweixin/rego/tree/main/examples/gallery

再贴一个 stream 组件的 demo 吧。

https://github.com/erweixin/rego/blob/main/examples/stream/stream_demo.gif

欢迎各位大佬试用、提 Issue 或 PR 。如果你也喜欢这种“在终端写 React”的思路，欢迎给个 Star 支持一下！👏

[lumyx]

怎么到处都是 hooks 。不了解 go ，叠甲以下是个人观点，如果 hooks 是个好东西，官方组件肯定早就纳入麾下了。 最近研究了 下 flutter 这边的 hooks （说是为了解决逻辑复用，但逻辑复用有其他解法），完全是为了 hooks 而 hooks 。

[cfu18]

支持一下

[weixind]

@lumyx

这是 go 语言下的 TUI 的一个解决方案。你可以理解成如何用 go 写一个 "终端页面"。现在的生态下的方案大部分处于 MVC 的思路下。rego 是尝试引入类似 MVVM 的思路，包括比较方便的组件化。具体用不用 hooks 只是 API 的设计。和用 react 传统的 state 或者 vue 的 data 相比只不过是个人喜好。

[guiyumin]

Hook 就是把一坨放进一个专门的函数里

我也不知道好不好

可能是 react 是为了对抗复杂性搞出来的一个 workaround