面试题：Svelte存储在复杂应用架构中的优化与实践

Question

在一个大型Svelte应用中，存在多个组件依赖于不同的store数据。部分store数据变化频繁，而有些相对稳定。请阐述如何合理地设计writable和readable store，以优化性能，减少不必要的重新渲染，并且说明在数据共享与模块解耦方面的策略。同时，举例说明如何通过Svelte的派生存储（derived store）来实现复杂业务逻辑的数据管理。

Answer 1

1. 合理设计 writable 和 readable store 优化性能

• writable store：
  • 对于变化频繁的数据，应使用 writable store。例如，一个实时更新的计数器。writable 允许组件直接修改数据，但是频繁的修改可能导致依赖它的组件频繁重新渲染。为了减少这种影响，应确保只有真正需要响应这些变化的组件订阅 writable store。例如，在一个聊天应用中，未读消息数量实时变化，可定义为 writable store：

  import { writable } from'svelte/store';
  const unreadCount = writable(0);
  

• readable store：
  • 对于相对稳定的数据，使用 readable store 更合适。readable store 一旦创建，外部组件无法直接修改其值，它主要用于提供只读数据。比如应用的配置信息，在应用启动后很少改变，可定义为 readable store：

  import { readable } from'svelte/store';
  const appConfig = readable({
    theme: 'light',
    defaultLanguage: 'en'
  });
  

2. 数据共享与模块解耦策略

• 数据共享：
  • 使用 Svelte 的 store 作为数据共享的媒介。不同组件可以订阅相同的 store，从而获取共享数据。例如，多个组件都需要获取当前用户信息，可创建一个 writable store 存储用户信息：

  import { writable } from'svelte/store';
  const currentUser = writable(null);
  

  • 然后在不同组件中导入并使用该 store：

  import { currentUser } from './userStore.js';
  let user;
  currentUser.subscribe((value) => {
    user = value;
  });
  

• 模块解耦：
  • 将不同的 store 逻辑封装在独立的模块中。例如，用户相关的 store 放在 userStore.js，产品相关的 store 放在 productStore.js。这样每个模块只关心自己的数据逻辑，不同模块之间通过 store 进行松散耦合。
  • 避免在组件中直接修改其他组件的状态，而是通过 store 来传递数据变化。例如，一个购物车组件和商品列表组件，商品列表组件通过修改购物车 store 来通知购物车组件有商品添加或移除，而不是直接操作购物车组件的内部状态。

3. 通过派生存储（derived store）实现复杂业务逻辑的数据管理

假设在一个电商应用中，有一个 cartItems 的 writable store 存储购物车中的商品列表，每个商品对象包含 price 和 quantity 字段。现在要计算购物车的总价格，可通过派生存储实现：

import { writable, derived } from'svelte/store';

// 购物车商品列表
const cartItems = writable([
  { id: 1, name: 'Product 1', price: 10, quantity: 2 },
  { id: 2, name: 'Product 2', price: 15, quantity: 1 }
]);

// 计算购物车总价格的派生存储
const totalPrice = derived(cartItems, ($cartItems) => {
  return $cartItems.reduce((acc, item) => {
    return acc + item.price * item.quantity;
  }, 0);
});

// 在组件中使用
let price;
totalPrice.subscribe((value) => {
  price = value;
});

在上述例子中，totalPrice 是基于 cartItems 派生出来的存储。每当 cartItems 变化时，totalPrice 会自动重新计算，并且依赖 totalPrice 的组件会相应更新，而无需手动监听 cartItems 的变化并进行复杂的计算逻辑，实现了复杂业务逻辑的数据管理。