usePick

const userStore = createStore({
  name: "张三",
  age: 30,
  email: "zhangsan@example.com",
  avatar: "avatar.jpg",
  preferences: { theme: "dark", language: "zh" },
  lastLogin: new Date(),
});

// ❌ Bad：任何 store 状态变化都会触发重新渲染
function UserName() {
  const user = useStoreValue(userStore);
  return <h1>{user.name}</h1>; // 仅使用 name，但订阅了所有状态
}

// ✅ Good：仅在 name 变化时重新渲染
function OptimizedUserName() {
  const { name } = usePick(userStore, "name");
  return <h1>{name}</h1>; // 只订阅需要的属性
}

const selectedFields = usePick(store, ...keys);
const selectedFields = usePickDeeply(store, ...keys); // 深度相等检查

function UserName() {
  // 仅在 name 变化时重新渲染
  const { name } = usePick(userStore, "name");
  return <h1>{name}</h1>;
}

function UserContact() {
  // 仅在 name 或 email 变化时重新渲染
  const { name, email } = usePick(userStore, "name", "email");

  return (
    <div>
      <h2>{name}</h2>
      <p>邮箱: {email}</p>
    </div>
  );
}

const settingsStore = createStore({
  theme: {
    colors: { primary: "#blue", secondary: "#gray" },
    fonts: { heading: "Arial", body: "Helvetica" },
  },
  notifications: {
    email: true,
    push: false,
  },
});

function ThemeSettings() {
  // 启用深度比较，避免不必要的重新渲染
  const { theme } = usePickDeeply(settingsStore, "theme");

  return (
    <div
      style={{
        color: theme.colors.primary,
        fontFamily: theme.fonts.heading,
      }}
    >
      当前主题配置
    </div>
  );
}

// ❌ Bad：不选择任何属性（等同于 useStoreValue）
const { name } = usePick(userStore);

// ❌ Bad：选择太多属性
const { name } = usePick(userStore, "name", "age", "email", "avatar");

// ✅ Good：仅选择所需属性
const { name, status } = usePick(userStore, "name", "status");

// ❌ Bad：过于细粒度
const { name } = usePick(userStore, "name");
const { email } = usePick(userStore, "email");
const { age } = usePick(userStore, "age");

// ✅ Good：分组相关属性
const { name, email, age } = usePick(userStore, "name", "email", "age");