React中导入Zustand状态属性的标准写法是什么

手动逐行写propA: state.propA形式的对象映射属于Zustand基础合法写法，但冗余度很高，可根据场景选择以下官方支持的简化方案，按推荐优先级排序：

1. 官方原生最简写法（v4.3.0 及以上版本支持） #

直接向useStore传入你需要获取的状态属性名组成的数组，Zustand 会自动返回对应属性组成的对象，内置浅比较逻辑，无需手动引入shallow，也不需要写任何映射逻辑：

// 直接解构即可，属性名和store中定义的完全一致
const { propA, propB, propC, ..., propZ } = useStore([
  'propA',
  'propB',
  'propC',
  // ... 其余需要的属性名
  'propZ'
])

注意：该写法默认开启浅比较，只有你选中的属性发生变更时，组件才会重渲染，性能和手动写对象selector加shallow完全一致。

2. 低版本兼容/需要重命名属性的写法 #

如果使用的Zustand版本低于v4.3.0，或者需要给导入的属性重命名，可以搭配简单的工具函数消除重复映射代码，不需要逐个写propA: state.propA：
首先定义一个可全局复用的通用状态拾取工具函数：

const pick = <T extends object, K extends keyof T>(state: T, ...keys: K[]) => {
  return keys.reduce((acc, key) => {
    acc[key] = state[key]
    return acc
  }, {} as Pick<T, K>)
}

在组件中使用时，只需要传入要拾取的属性名即可，需要重命名的属性单独声明：

import { shallow } from 'zustand/shallow'

const { propA, propB, renamedProp: propC } = useStore(
  state => ({
    ...pick(state, 'propA', 'propB'),
    renamedProp: state.propC
  }),
  shallow
)

3. 禁止使用的错误写法 #

不要直接解构无selector的store返回值：

// 反面示例：会订阅store全部状态变更，任何状态修改都会触发当前组件重渲染，性能极差
const { propA, propB } = useStore()

除非你确实需要用到store中存储的所有状态，否则绝对不要用这种写法。

补充说明：所有简化写法均为Zustand官方文档明确支持的合法用法，不存在兼容性或隐性性能问题。

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