Zustand/React两种多状态获取写法（含简写）的重渲染表现是否一致？

两种写法的差异说明 #

• 第一种官方写法的重渲染逻辑：
  每次调用useStore都传入了精准的状态选择器，Zustand会单独监听每个选择器返回值的变化。只有当state.nuts发生变更时，第一个useStore会触发组件重渲染；只有state.honey发生变更时，第二个useStore才会触发重渲染。store内其他不相关的状态变更完全不会影响当前组件。
• 第二种简写写法的重渲染逻辑：
  不传选择器直接调用useStore()会返回整个store的根对象，此时组件会监听store的所有状态变更。不管是nuts、honey还是store里其他你完全没用到的属性发生变化，组件都会触发重渲染，会产生非常多不必要的性能开销。

替代写法（实现和官方写法一致的重渲染效果，同时支持解构） #

如果你想要用解构的写法又不想引入多余的重渲染，可以搭配Zustand提供的shallow浅比较方法，写法如下：

import { shallow } from 'zustand/shallow'

// 只有nuts或者honey变化时才会触发重渲染，和分开写的效果完全一致
const { nuts, honey } = useStore(state => ({ 
  nuts: state.nuts, 
  honey: state.honey 
}), shallow)

内容的提问来源于stack exchange，提问作者wenzf