问题标签 [zustand]

我一直在研究Zusand和Recoil——两个相对较新的状态管理库。

Recoil 被大量宣传为对于具有深度嵌套结构的 React 应用程序“非常高效”。但是，我看不出它如何（或如何准确地）在性能方面优于 Zusand（并发模式除外）。

我可能弄错了，但这是我从文章和谈话中理解它的方式：“为什么”Recoil 表现出色的主要原因是，您所做的任何更新只会触发相关组件重新渲染，而不会打扰任何其他组件。Recoil 通过设计和开箱即用允许它，而基于上下文的库必须通过整个树传递每个更改，对这些更改进行差异/协调，然后可能只重新渲染必须更改的内容。

现在，Zusand 根本不使用 Context API。因此，我会假设（除了并发模式），它将具有与 Recoil 相当的性能优势，其中 Zusand 只会“触摸”相关组件，而不会通过整个组件树传递更改。

如果我不理解，请告诉我。这两个库在性能上是否具有可比性（没有并发模式）？或者 Recoil 的原子范式是否还有其他固有属性，这使得它在理论上在性能方面更胜一筹？

请注意：我希望答案不要过多地受模式和实践的影响。我知道有时范式的最大好处可能在于“它强制执行的声音模式”，但我感兴趣的不是它们强制执行的内容，而是它们允许通过可比努力做的事情。例如，我了解平坦的标准化状态将允许 Zusand 获得更好的性能，并且 Zusand 不一定“强迫您以适当/可扩展的方式执行此操作”。但我不希望正确模式的“可选性”成为劣势。

我正在使用 zustand 进行状态管理，并且在检索一次数据后，当组件状态发生变化时，我只尝试实时更新组件而不刷新页面。

这是我的商店

我尝试使用 useEffect 挂钩来检索数据，如下面的代码所示，我有另一个调用该addReservation函数的组件。下面的代码导致无限调用useEffect，而不是仅在有更改时才更新const reservations，当另一个组件调用该addReservation函数时。

我曾尝试这样拆分 useEffects，但需要再次刷新页面以显示更新的数据。（想要的结果是没有刷新）

我尝试将[]依赖数组作为 useEffect 钩子中的第二个参数，但效果不佳。

谢谢您的帮助。

据我了解，如果我更改组件中的状态，这将导致组件重新渲染，但在这种情况下，我使用 Zusand 将值存储在组件之外，但为什么每次滚动时我的组件仍然重新渲染/ 更新 Zustand 状态？

要测试，滚动窗口并打开控制台，这将显示每次滚动/更新 Zusand 状态时都会触发 console.log。

制作示例演示： https ://codesandbox.io/s/jovial-stonebraker-rivjo?file=/src/App.js

代码 App.js

祖斯坦状态：

从Zusand存储中获取状态的两种方式在状态更改的重新渲染方面是否相同？

文档中描述的方法：

速记：

我想将经过身份验证的用户放在 zustand 商店中。我使用 react-query 获得了经过身份验证的用户，这会导致一些问题。我不确定我为什么要这样做。我希望所有与身份验证相关的东西都可以在一个钩子中访问，所以我认为 zustand 是一个不错的选择。

这是获取身份验证用户的钩子：

我想把 auth 用户放在这家商店：

这是我得到的错误：

错误：无效的挂钩调用。钩子只能在函数组件的主体内部调用。这可能由于以下原因之一而发生。

您可以在反应文档中阅读它： https ://reactjs.org/warnings/invalid-hook-call-warning.html

（为了便于理解，我在这篇文章中更改了一些函数的名称。useMeQuery = useAuthUserQuery）

我理解错误，但我不知道如何修复它。

我正在关注Zusstand wiki 来实施 testing，但提供的解决方案不适用于应用程序渲染的基本测试。我的项目建立在Electron React Boilerplate样板项目之上。

这是完整的错误。Jest 使用 node withexperimental-vm-modules因为我遵循Jest 文档来支持 ESM 模块。

在notifs.ts文件顶部，正常导入 Zusand 时使用import create from 'zustand'.

开玩笑的配置package.json：

我留下的./src/__mocks__/zustand.js文件与 Zusand wiki 测试页面中的文件完全相同。无论我是否zustand在transformIgnorePatterns.

我的 Babel 配置包含[require('@babel/plugin-proposal-class-properties'), { loose: true }],在插件部分中，并且output.library.type是'commonjs2'

我tsconfig.json的compilerOptions.module设置为"CommonJS"，项目的package.json "type"字段设置为"commonjs"。

依赖版本：

我不知道还有什么相关的，如果需要其他任何东西，请告诉我。任何和所有的帮助表示赞赏，感谢您的时间。

我想在我的 Next.js 应用程序中集成一个搜索功能，它应该如下所示：

• 用户在 Header 内的 searchBar 中键入关键字
• 单击搜索按钮后，关键字应在 SearchResult 页面上传递，在该页面中我将其动态加载到 youtube-search-api 链接

结构如下所示：

• Header.js（包含 SearchBar 组件）
• _app.js（包含 Header 和组件）
• SearchResults.js（在 pages 文件夹内，应该从 Header 中获取键入的关键字）

我用 zustand 试了一下，目前看起来像这样：

页眉.js：

搜索栏.js：

_app.js：

和 SearchResults.js：

有人可以通过告诉我我做错了什么以及它如何以正确的方式工作来帮助我吗？感谢你们！！

当我将鼠标悬停在Comp1它上面时，我希望状态更改为 true（我正在将true参数传递给它）。另外我想确保这样做不会导致Comp2组件重新渲染。

我的理解是，如果我愿意，useStoreOnHover.setState({ onComp1: true })它应该可以工作，但不能:(

我也试过const onComp1Set = useStoreOnHover((s) => s.onComp1Set)但还是一样:(

我能够让它工作的唯一方法是，const { onComp1Set } = useStoreOnHover()但我试图避免这种类型的解构，因为它也会触发重新渲染到其他组件。

现场示例：https ://codesandbox.io/s/winter-grass-qxrv8

我有以下代码，

我希望role价值来自getRole功能，我该怎么做？

我需要一些对 Zusstand 更有经验的人的意见，以分享他们管理关系状态的方式。目前我们有以下内容：

假设我们有示例实体s 和它们Campaign的s。返回它们的 REST API 采用以下格式：ElementsSetting

GET <API>/campaigns/1?incl=elements,elements.settings

我们目前在 Reactjs 应用程序中所做的是获取这些数据，然后将其转换为以下规范化格式和set函数：

但是，我不确定这是最佳解决方案，因为将所有GET请求转换为规范化格式，然后在您想要构造 a或请求POST时将它们转换回嵌套对象是相当乏味的。PUTPATCH

那么，简而言之，你们如何在基于 Zusstand 的 RESTful-API 支持的 React 应用程序中设计状态？