reactjs - 使用 Zusand/React 获取多个状态（简写语法）

Question

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

文档中描述的方法：

const nuts = useStore(state => state.nuts)
const honey = useStore(state => state.honey)

速记：

const { nuts, honey } = useStore()

Answer 1

简答

不，这些方法并不相同。

长答案

如zustand 自述文件中所述：

获取一切

您可以，但请记住，它会导致组件在每次状态更改时更新！

常量状态 = useStore()

因此，当您使用选择器选择某些状态切片时，组件只会在所选值更改时更新/重新呈现。

当你在useStore()没有传递任何参数的情况下调用它时，你实际上是在为你的组件订阅整个状态。作为一个比喻，您可以说“zustand 将要求组件在状态树中的任何位置更新/重新呈现任何状态更改”。简写语法中的对象解构只是以更快的方式将变量分配给对象属性的语法糖。返回（并订阅组件）的值useStore()仍然是整个状态。

因此，如果您使用const { nuts, honey } = useStore()，您可能会遇到性能问题。这些问题是否明显取决于应用程序，但我想说只使用选择器就很容易，不必担心。

进一步的建议

如果您需要在一次useStore(...)调用中选择所有状态切片，推荐的方法是为此使用合适的选择器。引用选择多个状态切片

import shallow from 'zustand/shallow'

// Object pick, re-renders the component when either state.nuts or state.honey change
const { nuts, honey } = useStore(state => ({ nuts: state.nuts, honey: state.honey }), shallow)

// Array pick, re-renders the component when either state.nuts or state.honey change
const [nuts, honey] = useStore(state => [state.nuts, state.honey], shallow)

// Mapped picks, re-renders the component when state.treats changes in order, count or keys
const treats = useStore(state => Object.keys(state.treats), shallow)