使用Writable Store处理大型嵌套对象的性能优化问询

针对你遇到的问题，这里提供几种实用的状态管理优化方案，避免无变更场景下的重型代码重复执行：

1. 用Derived Store拆分单个用户状态 #

将顶层的用户集合Store拆分为单个用户的Derived Store，让组件只订阅自身关联的用户Store，而非整个集合：

// 顶层用户集合Store
export const userStore = writable({});

// 生成单个用户的Store映射
export const userStores = derived(userStore, $users => {
  const map = {};
  Object.entries($users).forEach(([id, user]) => {
    // 为每个用户创建独立的writable store
    map[id] = writable(user);
  });
  return map;
});

更新逻辑调整： #

• 添加新用户：先更新顶层集合，再同步单个用户Store

const handlers = {
  newUser: async (user) => {
    userStore.update(users => ({ ...users, [user.id]: user }));
    // 同步单个用户Store
    get(userStores)[user.id].set(user);
  },
  statusChange: async (userId, newStatus) => {
    // 直接更新对应用户的Store
    get(userStores)[userId].update(user => ({
      ...user,
      status: newStatus
    }));
    // 同步顶层集合（可选，若顶层需保持最新）
    userStore.update(users => ({
      ...users,
      [userId]: { ...users[userId], status: newStatus }
    }));
  }
};

组件使用： #

在<User />组件中只订阅当前用户的Store：

<script>
  import { userStores } from './stores.js';
  export let userId;
  // 仅订阅当前用户的Store
  const user = $userStores[userId];
</script>

<!-- 组件内容 -->
<div>{$user.name}</div>

$: {
  // 只有当前用户变化时，重型代码才会执行
  if ($user.status === 'online') {
    // 执行重型逻辑
  }
}

2. 不可变数据 + 精细订阅 #

坚持使用不可变数据更新Store，同时让组件订阅更具体的状态路径，而非整个集合：

更新逻辑（不可变方式）： #

const handlers = {
  statusChange: async (userId, newStatus) => {
    userStore.update(users => ({
      ...users,
      [userId]: {
        ...users[userId],
        status: newStatus,
        // 深层嵌套同样用展开保持不可变
        profile: {
          ...users[userId].profile,
          lastActive: Date.now()
        }
      }
    }));
  }
};

组件精细订阅： #

在<User />组件中通过Derived Store订阅单个用户：

<script>
  import { userStore } from './stores.js';
  export let userId;
  // 仅订阅当前用户的数据
  const currentUser = derived(userStore, $users => $users[userId]);
</script>

$: {
  // 只有当前用户的属性变化时才执行
  const user = $currentUser;
  if (user?.profile?.online) {
    // 重型代码逻辑
  }
}

3. 精细控制Reactive语句的依赖 #

避免让重型代码依赖整个用户对象，只绑定实际需要的深层属性：

<script>
  export let user;
</script>

<!-- 不要依赖整个user对象 -->
<!-- $: heavyLogic(user); -->

<!-- 只依赖具体的目标属性 -->
$: if (user?.profile?.online) {
  heavyLogic(user.profile.online);
}

这样只有当user.profile.online变化时，重型代码才会触发执行。

4. 优化嵌套Store的使用体验 #

如果坚持用嵌套Store，可以封装工具函数简化深层更新操作，解决逐层查找的繁琐问题：

function updateNested(rootStore, path, updater) {
  const root = get(rootStore);
  const keys = path.split('.');
  let target = root;
  
  // 逐层找到目标Store
  for (let i = 0; i < keys.length - 1; i++) {
    target = target[keys[i]];
  }
  
  // 更新目标Store
  target[keys.pop()].update(updater);
}

// 使用示例：更新用户ID为123的状态
updateNested(userStore, '123.status', status => 'online');

顶层添加新用户时，直接在集合中插入新的writable Store即可：

handlers.newUser = async (user) => {
  userStore.update(users => ({
    ...users,
    [user.id]: writable(user)
  }));
};

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