在 react 中使用 signals 库

54 天前
 Akay47

比较推崇 solidjs 和 preact 的 signals, 但这两个库的生态不行, 如果在 react 中使用 preact/signals-react 是否可行呢? 尝试了下基础使用是 ok 的, 只是不知道项目大一点会不会出现和其它库不兼容的问题

https://www.npmjs.com/package/@preact/signals-react

2540 次点击
所在节点    React
12 条回复
songray
54 天前
意义不大。

preact signals 是浅层响应式,也就是 const foo = useSignal([]),你必须要 foo.value = newVal 更新引用才会触发视图更新,而且这种情况会走 vdom diff ,和 react 没啥区别。

官网说的性能好主要是针对单值场景。比如 const foo = useSignal('a'), <div>{foo}</div>, 这个情况下会绕过 vdom diff ,直接更新 dom ,性能会比较好。

现在这个版本我更推荐直接开 react compiler 得了...
linkopeneyes
54 天前
我之前在项目里用过,跟其他库也没什么问题,毕竟 signal 里面用了 useSyncExternalStore 会通知 react 重新渲染,好处就是可以在脱离 react 之外的地方更新 signal ,react 也会被重新渲染
deng565430
53 天前
用 zustand 不是更好吗
shunia
53 天前
那我感觉直接用 solid 或者 svelte ,不是更好吗?

singals 没有在 react 里实现深度适配,用起来体验应该不如上面两个吧。
DICK23
53 天前
不用 solid 的话用 usesignal 写的太繁琐了,确实不如直接用 zustand
ZztGqk
53 天前
你可以混合开发,用 astro + nanostores ,对于一些重的场景用另外一个框架,另外如果真在意 react 性能的话,楼上的 zustand 和 Jotai 也是可以的,把副作用全部放在 setter 和 getter 里,避免重复计算。
lumyx
53 天前
花里胡哨,没解决什么切实的痛点,dart 这边也抄了一个,但看着更像 炫技并没什么亮点。所谓的细粒度更新,对于 flutter Widget 没有任何效果,flutter 也不需要所谓细粒度更新。 而纯数据上的细粒度更新,干了十年客户端从没遇到有这方面的需求
zthxxx
53 天前
@songray #1 不能说意义不大,只能说毫无意义 [Doge]

确实是因为 react 重渲染机制与 useSyncExternalStore 这类存储形态决定了,

solidjs signals 的核心是「各层组件不用重渲染,消费 signals 的副作用直接触发最底层 UI 更新」

react 里不管怎么写,用 zustand 还是 jotai 还是 preact signals 都绕不开「要改 UI 更新,必须让整个父组件重渲染」;
这里说的父是指所有 <div>{foo}</div> 的父
Akay47
53 天前
谢谢各位大佬的回复, 之所以用 signals 主要是这种开发方式心智负担较小, 开发体验也比较好, 性能倒是没怎么考虑
zcf0508
53 天前
molvqingtai
53 天前
和 react 的设计思想相悖
zbinlin
53 天前
我试着用它来封装一个持久化的库,使用起来还不错,没碰到什么问题。

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://ex.noerr.eu.org/t/1167735

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX