面试题：Solid.js 中 createMemo 动态依赖的性能优化

优化思路

减少依赖数量：仔细分析createMemo的计算逻辑，确定真正影响计算结果的状态，将不必要的依赖移除。避免引入频繁变化但对计算结果无实质影响的动态状态作为依赖。
稳定依赖：对于频繁变化但对createMemo计算结果无影响的依赖，尝试将其从依赖列表中剔除，并在createMemo内部通过其他方式获取（例如在函数内部使用getSnapshot获取状态，而非直接作为依赖）。
分组依赖：如果依赖较多且可分为不同组，每组依赖的变化频率不同，可以考虑使用多个createMemo。将变化频率相近的依赖放在同一个createMemo中，这样当某一组依赖变化时，仅重新计算对应的createMemo，减少整体的重新计算量。

技术手段

使用createSelector（类似 Redux 的概念）：可以自定义一个类似createSelector的函数，它接收多个依赖和一个计算函数。这个函数内部可以跟踪依赖的变化，只有当真正影响计算结果的依赖变化时，才触发重新计算。

function createSelector(deps, computeFn) {
    let prevDeps = deps.slice();
    let memoizedValue;
    const memo = () => {
        const currentDeps = deps.slice();
        const hasChanged = currentDeps.some((dep, index) => dep!== prevDeps[index]);
        if (hasChanged) {
            memoizedValue = computeFn(...currentDeps);
            prevDeps = currentDeps;
        }
        return memoizedValue;
    };
    return memo;
}
// 使用示例
const expensiveComputation = createSelector([state1, state2], (s1, s2) => {
    // 复杂计算
});

防抖（Debounce）和节流（Throttle）：
- 防抖：对于变化非常频繁的依赖，可以使用防抖技术。例如，如果一个输入框的值变化频繁触发createMemo重新计算，可以使用防抖函数，使得在一段时间内输入框值频繁变化时，createMemo不会立即重新计算，而是等待输入停止一段时间后再进行计算。

import { createMemo, createSignal } from'solid-js';
import { debounce } from 'lodash';

const [inputValue, setInputValue] = createSignal('');
const debouncedInputValue = createMemo(() => debounce(() => inputValue(), 300)());

const complexComputation = createMemo(() => {
    // 依赖debouncedInputValue进行计算
});

- **节流**：限制依赖变化触发`createMemo`重新计算的频率。比如每500毫秒允许重新计算一次，即使依赖在这500毫秒内变化多次，也只会重新计算一次。

import { createMemo, createSignal } from'solid-js';
import { throttle } from 'lodash';

const [data, setData] = createSignal(0);
const throttledData = createMemo(() => throttle(() => data(), 500)());

const result = createMemo(() => {
    // 依赖throttledData进行计算
});

Memoize 中间函数：在createMemo内部计算之前，对计算函数进行 memoize 处理。即缓存之前的计算结果和输入参数，当相同参数再次传入时，直接返回缓存结果，避免重复计算。

function memoize(fn) {
    const cache = new Map();
    return function (...args) {
        const key = args.toString();
        if (cache.has(key)) {
            return cache.get(key);
        }
        const result = fn.apply(this, args);
        cache.set(key, result);
        return result;
    };
}

const complexCalculation = memoize((a, b) => {
    // 复杂计算逻辑
});

const memoizedResult = createMemo(() => {
    const value1 = someState();
    const value2 = anotherState();
    return complexCalculation(value1, value2);
});

面试题：Solid.js 中 createMemo 动态依赖的性能优化

知识考点

面试题答案

优化思路

技术手段