在 react 中使用 signals 库

18 小时 24 分钟前
 Akay47

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

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

1241 次点击
所在节点    React
12 条回复
songray
18 小时 13 分钟前
意义不大。

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

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

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

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

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

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

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

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

https://www.v2ex.com/t/1167735

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

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

© 2021 V2EX