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

Question

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

文档中描述的方法:

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

速记:

const { nuts, honey } = useStore()

Answer 1

简答

不，这些方法不相同。

长答案

如 zustand readme 中所述:

Fetching everything

You can, but bear in mind that it will cause the component to updateon every state change!

const state = useStore()

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

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

所以，如果你使用 const {nuts, honey } = useStore()，你可能会遇到性能问题。这些问题是否会引起注意取决于应用程序，但我想说的是，只需使用选择器就很容易，不必担心。

进一步的建议

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

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)