在 react 中使用 signals 库

[Akay47]

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

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

[songray]

意义不大。

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

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

现在这个版本我更推荐直接开 react compiler 得了...

[linkopeneyes]

我之前在项目里用过，跟其他库也没什么问题，毕竟 signal 里面用了 useSyncExternalStore 会通知 react 重新渲染，好处就是可以在脱离 react 之外的地方更新 signal ，react 也会被重新渲染

[deng565430]

用 zustand 不是更好吗

[shunia]

那我感觉直接用 solid 或者 svelte ，不是更好吗？

singals 没有在 react 里实现深度适配，用起来体验应该不如上面两个吧。

[DICK23]

不用 solid 的话用 usesignal 写的太繁琐了，确实不如直接用 zustand

[ZztGqk]

你可以混合开发，用 astro + nanostores ，对于一些重的场景用另外一个框架，另外如果真在意 react 性能的话，楼上的 zustand 和 Jotai 也是可以的，把副作用全部放在 setter 和 getter 里，避免重复计算。

[lumyx]

花里胡哨，没解决什么切实的痛点，dart 这边也抄了一个，但看着更像 炫技并没什么亮点。所谓的细粒度更新，对于 flutter Widget 没有任何效果，flutter 也不需要所谓细粒度更新。 而纯数据上的细粒度更新，干了十年客户端从没遇到有这方面的需求

[zthxxx]

@songray #1 不能说意义不大，只能说毫无意义 [Doge]

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

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

react 里不管怎么写，用 zustand 还是 jotai 还是 preact signals 都绕不开「要改 UI 更新，必须让整个父组件重渲染」；
这里说的父是指所有 <div>{foo}</div> 的父

[Akay47]

谢谢各位大佬的回复, 之所以用 signals 主要是这种开发方式心智负担较小, 开发体验也比较好, 性能倒是没怎么考虑

[zcf0508]

https://github.com/Rajaniraiyn/react-alien-signals

[molvqingtai]

和 react 的设计思想相悖