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

[makelove]

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 这种运行时的无法避免的缺点。

[yuzhang98]

svelte 编译出来的代码不好看是因为他没有 runtime，而 SolidJS 好像不具备这点优势吧

[sphawkcn]

“无休止地重运行函数”是啥意思？指的是重复渲染吗？
这个有什么关系，只要不影响性能就行，如果影响到性能再优化。

[releaseme]

@yuzhang98 solid 和 svelte 都是无 VDOM 的编译型框架，runtime 都可以忽略不计。前段时间看 solid 作者直播对比打包产物 solid 比 svelte 要小的，丑可能是因为 svelte 用 位掩码记录脏数据

https://zhuanlan.zhihu.com/p/350507037

[makelove]

@yuzhang98 runtime 并不是缺点，对开发和构建毫无负面影响，没 runtime 反而是，因为没有公共共享部分，写得组件越多体积膨胀越严重

[yuuko]

@sphawkcn 说的可能是 render 函数或者 hook

[makelove]

@sphawkcn 我说了问题不是性能（当然性能也是个问题，复杂页面需要大量 useCallback 什么的也很烦），且是重复运行，哪怕一个简单的 setInterval 功能在重复运行下也不简单。当然这种常用的一般有封装库了，但你的业务逻辑没有啊，还是要很注意这个的，这是个不小的心智负担

[AaronLee01]

redux 或者 mobx + react, 什么时候“重运行”不就看自己的代码了

[Kilerd]

svelte 的无 runtime 和复用 lib 是微前端最佳的配置啊。不过绝大部分人也没有这个场景就是了。爱用哪个就是哪个（

[Cbdy]

点进去发现已经点了 Star

[namelosw]

@makelove

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

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

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

---

另外我觉得 React 的最大问题是没有实现他们以前承诺过的自动分析依赖…

[chaoFanExcellent]

我想知道总有人说烦 vue 的模板，是烦他哪点？缺点是什么？

[makelove]

@namelosw 就是视图函数本身会重复运行，不管是因为本地 state 变了还是 context 变了还是 store 变了，总之这个函数会重新运行。 就是这个文里的意思：
https://overreacted.io/zh-hans/a-complete-guide-to-useeffect/
你看一个小小的功能要这么长篇幅来解释到底发生了啥，我相信初学 Hooks 的每个人都要一段时间适应期。
然而，在 Solid/Vue 里完全不需要理解这个，因为这二货的视图不会一遍遍反复运行，也不再需要 Hooks 的种种规则，包括你说的什么自动分析依赖。

[makelove]

@chaoFanExcellent 我不知道 Vue 模板现在能不能完美支持 TypeScript 类型提示了，即使需要也应该要配合相应插件之类的吧，直接用 JSX 就不需要啊，而且 JSX 能直接引用作用域内的变量，体验和写原生 JS 没有区别毫无割裂感。
svelte 没有 JSX 要用模板也是我不喜欢的一个原因，而 solid 用 JSX,表达力也不比模板差，那要模板有何用。
当然了，Vue 用模板是有它的实现方面的因素是迫不得已，不代表 yyx 喜欢模板吧。

[namelosw]

@makelove View 重复运行有什么问题嘛？ 又不是 side effect 。

Vue 要分析依赖的好吧，不然状态变了怎么知道要更新哪些 view ？

[Rocketer]

还是 Angular 聪明啊，现在默认设置把自动检查数据变化都禁掉了，更新完数据需要主动让他 detectChanges()，这就没有反复调用的性能问题了。

[IanHo]

@makelove 可以的，vscode 装 volar 插件，然后在配置里把 volar 的模板检测打卡就行

[KuroNekoFan]

变量加料，用 helper 难道不足够令人烦躁么

[Charrlles]

有强迫症的话，加上 useMemo 就好了

[Kasumi20]

解决问题必然会引入新的问题