面试题：Svelte 自定义 store 主题切换中的响应式优化

1. Store 设计优化

细粒度状态管理：将主题相关的状态拆分成更细粒度的部分。例如，不要把整个主题的所有样式属性都放在一个对象里作为 store 的值，而是拆分成多个独立的状态。

// themeStore.js
import { writable } from'svelte/store';

// 拆分主题颜色状态
export const primaryColor = writable('#000');
export const secondaryColor = writable('#fff');

使用 derived store：当需要从多个状态衍生出一个新状态时，使用 derived 来避免不必要的更新。如果主题的某个样式依赖于多个状态的组合，使用 derived 可以确保只有当真正影响该样式的状态变化时才更新。

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

const color1 = writable('#000');
const color2 = writable('#fff');

// 衍生出一个新的状态，只有当 color1 或 color2 变化时才更新
export const combinedColor = derived([color1, color2], ([$color1, $color2]) => {
    return $color1 + $color2;
});

2. 组件绑定优化

减少不必要的响应式绑定：在组件中，只对真正需要响应主题变化的部分进行绑定。

{#if true}
    <div style="color: {primaryColor}">
        <!-- 仅颜色部分依赖主题，避免整个 div 因主题无关的状态变化而重新渲染 -->
        Some text
    </div>
{/if}

使用 $: 块进行有条件的响应式更新：

import { primaryColor } from './themeStore.js';

let text = 'Initial text';
$: {
    // 只有 primaryColor 变化时，才更新 text
    if (primaryColor === '#000') {
        text = 'Black theme text';
    } else {
        text = 'Other theme text';
    }
}

3. 其他优化

Memoization（记忆化）：对于一些计算开销较大的主题相关函数，使用记忆化来避免重复计算。

const memoize = (fn) => {
    let cache;
    return function() {
        const key = arguments.length === 1? arguments[0] : JSON.stringify(arguments);
        if (!cache || cache.key!== key) {
            cache = { key, value: fn.apply(this, arguments) };
        }
        return cache.value;
    };
};

// 记忆化一个计算主题相关样式的函数
const calculateThemeStyle = memoize((primaryColor) => {
    // 复杂的计算逻辑
    return { style: `color: ${primaryColor}` };
});

星途面试题库

面试题：Svelte 自定义 store 主题切换中的响应式优化

知识考点

面试题答案

1. Store 设计优化

2. 组件绑定优化

3. 其他优化