使用Zustand/React (简写语法)获取多个状态

Question

在状态更改的重新呈现方面，从Zustand存储中获取状态的两种方法是否完全相同？

在文档中描述的方法。

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

速记：

const { nuts, honey } = useStore()

Answer 1

简短回答

不，这些方法不一样。

长答案

正如作站自述中提到的

抓取一切 您可以这样做，但请记住，它将导致组件在每次状态更改时更新！ const = 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)