V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
推荐关注
Meteor
JSLint - a JavaScript code quality tool
jsFiddle
D3.js
WebStorm
推荐书目
JavaScript 权威指南第 5 版
Closure: The Definitive Guide
makelove
V2EX  ›  JavaScript

最近发现了个宝藏 Web 框架 SolidJS,有种未来的感觉

  •  2
     
  •   makelove · 2021-09-18 15:47:51 +08:00 · 8660 次点击
    这是一个创建于 1160 天前的主题,其中的信息可能已经有所发展或是发生改变。

    https://www.solidjs.com/

    最近几年都在写 React Hooks,越来越发现这货其实缺点和优点一样多,视图函数一有变动就重新运行一开始我是拒绝的,后来被洗脑后勉强认为是个合理的符合逻辑的行为并愉快地写了二年,但还是时不时会被这个底层行为搞得有点烦燥,对 React 算是脱粉了

    当然替代是有,Vue 版 Hooks 就不会无休止地重运行函数,但是不知道为什么对 Vue 喜欢不起来(比如不喜欢有模板功能,虽然可以不用但眼见着烦

    svelte 又是另一种,不过出于对用编译器魔改 JS 的这种重手段来搞框架这种莫名其妙的心结对这个框架喜欢不起来,编译出来的东西又看着又太屎了

    昨天把玩了一天 Solid,相当喜欢。这个框架也和 svelte 不用 VDOM,号称可以精细更新 DOM 性能无敌不做无用功。 当然性能不是我最主要的关注点,主要是这货 API 类 React 但它的视图函数不会重复运行,而且因为不用 VDOM,操作的对象直接就是真实 DOM Element,感觉接地气多了(比如视图返回一个<div ...>,它返回不是一个 React element 而是真.HTMLDivElement )

    另外虽然也用的 JSX 语法,但确实也是用编译器的不是用原本的 JSX 转换语义。但转出来的东西比 svelte 易读多了。

    总之,优点是优能极高,API 类 React Hooks 且简单(至少概念比 Vue 少),视图不会重复运行。 大缺点暂时没发现,发现几个小缺点,比如因为 Reactive,变量不象 React 是普通的变量而是加料的,用的时候要加(),操作几个复杂变量如 props,children 要用它提供的 helper,不过只是开发时的规则习惯就好了,不是 React Hooks 这种运行时的无法避免的缺点。

    19 条回复    2021-09-19 14:52:44 +08:00
    yuzhang98
        1
    yuzhang98  
       2021-09-18 15:58:43 +08:00   ❤️ 2
    svelte 编译出来的代码不好看是因为他没有 runtime,而 SolidJS 好像不具备这点优势吧
    sphawkcn
        2
    sphawkcn  
       2021-09-18 16:02:14 +08:00
    “无休止地重运行函数”是啥意思?指的是重复渲染吗?
    这个有什么关系,只要不影响性能就行,如果影响到性能再优化。
    releaseme
        3
    releaseme  
       2021-09-18 16:09:13 +08:00
    @yuzhang98 solid 和 svelte 都是无 VDOM 的编译型框架,runtime 都可以忽略不计。前段时间看 solid 作者直播对比打包产物 solid 比 svelte 要小的,丑可能是因为 svelte 用 位掩码记录脏数据

    https://zhuanlan.zhihu.com/p/350507037
    makelove
        4
    makelove  
    OP
       2021-09-18 16:12:05 +08:00
    @yuzhang98 runtime 并不是缺点,对开发和构建毫无负面影响,没 runtime 反而是,因为没有公共共享部分,写得组件越多体积膨胀越严重
    yuuko
        5
    yuuko  
       2021-09-18 16:15:46 +08:00
    @sphawkcn 说的可能是 render 函数或者 hook
    makelove
        6
    makelove  
    OP
       2021-09-18 16:18:29 +08:00
    @sphawkcn 我说了问题不是性能(当然性能也是个问题,复杂页面需要大量 useCallback 什么的也很烦),且是重复运行,哪怕一个简单的 setInterval 功能在重复运行下也不简单。当然这种常用的一般有封装库了,但你的业务逻辑没有啊,还是要很注意这个的,这是个不小的心智负担
    AaronLee01
        7
    AaronLee01  
       2021-09-18 17:13:11 +08:00
    redux 或者 mobx + react, 什么时候“重运行”不就看自己的代码了
    Kilerd
        8
    Kilerd  
       2021-09-18 18:00:25 +08:00 via iPhone
    svelte 的无 runtime 和复用 lib 是微前端最佳的配置啊。不过绝大部分人也没有这个场景就是了。爱用哪个就是哪个(
    Cbdy
        9
    Cbdy  
       2021-09-18 19:52:36 +08:00
    点进去发现已经点了 Star
    namelosw
        10
    namelosw  
       2021-09-18 20:49:39 +08:00
    @makelove

    > 但还是时不时会被这个底层行为搞得有点烦燥,对 React 算是脱粉了
    > 我说了问题不是性能(当然性能也是个问题,复杂页面需要大量 useCallback 什么的也很烦),且是重复运行,哪怕一个简单的 setInterval 功能在重复运行下也不简单。

    所以你说的重复运行到底是 Fiber 还是自己写的 Hooks ?

    如果是前者的话跟操作系统设计是一样的,如果是后者的话依赖变更重新运行在代数上是更合理的吧… 没有 Hooks 以前还经常为没有这个行为发愁,只能用 Redux 和 Saga 。

    ---

    另外我觉得 React 的最大问题是没有实现他们以前承诺过的自动分析依赖…
    chaoFanExcellent
        11
    chaoFanExcellent  
       2021-09-18 21:50:37 +08:00
    我想知道总有人说烦 vue 的模板,是烦他哪点?缺点是什么?
    makelove
        12
    makelove  
    OP
       2021-09-18 22:29:59 +08:00
    @namelosw 就是视图函数本身会重复运行,不管是因为本地 state 变了还是 context 变了还是 store 变了,总之这个函数会重新运行。 就是这个文里的意思:
    https://overreacted.io/zh-hans/a-complete-guide-to-useeffect/
    你看一个小小的功能要这么长篇幅来解释到底发生了啥,我相信初学 Hooks 的每个人都要一段时间适应期。
    然而,在 Solid/Vue 里完全不需要理解这个,因为这二货的视图不会一遍遍反复运行,也不再需要 Hooks 的种种规则,包括你说的什么自动分析依赖。
    makelove
        13
    makelove  
    OP
       2021-09-18 22:38:51 +08:00
    @chaoFanExcellent 我不知道 Vue 模板现在能不能完美支持 TypeScript 类型提示了,即使需要也应该要配合相应插件之类的吧,直接用 JSX 就不需要啊,而且 JSX 能直接引用作用域内的变量,体验和写原生 JS 没有区别毫无割裂感。
    svelte 没有 JSX 要用模板也是我不喜欢的一个原因,而 solid 用 JSX,表达力也不比模板差,那要模板有何用。
    当然了,Vue 用模板是有它的实现方面的因素是迫不得已,不代表 yyx 喜欢模板吧。
    namelosw
        14
    namelosw  
       2021-09-18 22:42:42 +08:00
    @makelove View 重复运行有什么问题嘛? 又不是 side effect 。

    Vue 要分析依赖的好吧,不然状态变了怎么知道要更新哪些 view ?
    Rocketer
        15
    Rocketer  
       2021-09-19 00:34:43 +08:00 via iPhone
    还是 Angular 聪明啊,现在默认设置把自动检查数据变化都禁掉了,更新完数据需要主动让他 detectChanges(),这就没有反复调用的性能问题了。
    IanHo
        16
    IanHo  
       2021-09-19 09:33:12 +08:00
    @makelove 可以的,vscode 装 volar 插件,然后在配置里把 volar 的模板检测打卡就行
    KuroNekoFan
        17
    KuroNekoFan  
       2021-09-19 13:01:00 +08:00 via iPhone
    变量加料,用 helper 难道不足够令人烦躁么
    Charrlles
        18
    Charrlles  
       2021-09-19 13:25:44 +08:00 via iPhone
    有强迫症的话,加上 useMemo 就好了
    Kasumi20
        19
    Kasumi20  
       2021-09-19 14:52:44 +08:00
    解决问题必然会引入新的问题
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   5212 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 34ms · UTC 01:20 · PVG 09:20 · LAX 17:20 · JFK 20:20
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.