面试题：Solid.js createMemo 在复杂场景下的性能瓶颈与突破

可能导致性能瓶颈的原因

不必要的重新计算：createMemo 依赖的状态频繁变化，即使实际数据未改变，也会触发重新计算。例如，在依赖数组中包含了不必要的状态，导致每次状态变化都引发 createMemo 重新计算。
复杂的相互依赖关系：多个 createMemo 之间形成复杂的依赖循环或过度嵌套，使得计算链条过长，每次状态变化时需要进行大量的连锁反应式计算。
数据结构不合理：使用的数据结构在查询、更新时性能较低。例如，频繁操作大数组，而没有使用更高效的数据结构（如 Map、Set 等），导致在 createMemo 计算过程中数据处理耗时增加。
未充分利用 Solid.js 特性：没有利用 Solid.js 的细粒度响应式特性，比如没有合理使用 createEffect 与 createMemo 配合，或者没有正确设置依赖以优化计算。

解决方案

调整 createMemo 使用方式
- 精确依赖管理：仔细检查 createMemo 的依赖数组，只包含真正影响计算结果的状态。例如：

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

const [count, setCount] = createSignal(0);
const [unrelatedValue, setUnrelatedValue] = createSignal('');

// 错误示例，包含不必要的依赖
// const memoizedValue = createMemo(() => {
//     return count() * 2;
// }, [count, unrelatedValue]);

// 正确示例，只依赖 count
const memoizedValue = createMemo(() => {
    return count() * 2;
}, [count]);

- **避免依赖循环**：梳理 `createMemo` 之间的依赖关系，打破循环依赖。可以通过重构计算逻辑，将循环依赖的部分拆分成独立的计算逻辑，通过中间状态来解耦。
- **批量更新**：在可能的情况下，将多个相关状态的更新合并为一次，减少 `createMemo` 不必要的重新计算次数。例如使用 `batch` 函数（Solid.js 提供）：

import { createSignal, batch } from'solid-js';

const [count1, setCount1] = createSignal(0);
const [count2, setCount2] = createSignal(0);

const combinedMemo = createMemo(() => {
    return count1() + count2();
}, [count1, count2]);

// 错误示例，多次更新触发多次重新计算
// setCount1(count1() + 1);
// setCount2(count2() + 1);

// 正确示例，批量更新
batch(() => {
    setCount1(count1() + 1);
    setCount2(count2() + 1);
});

数据结构优化
- 选择合适的数据结构：如果频繁进行查找操作，使用 Map 代替数组。例如，原本通过遍历数组查找元素：

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

const [items, setItems] = createSignal([{ id: 1, value: 'a' }, { id: 2, value: 'b' }]);

const findItemById = createMemo(() => {
    const arr = items();
    for (let i = 0; i < arr.length; i++) {
        if (arr[i].id === 2) {
            return arr[i].value;
        }
    }
    return null;
}, [items]);

可以改为使用 Map：

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

const itemMap = new Map([[1, { id: 1, value: 'a' }], [2, { id: 2, value: 'b' }]]);
const [items, setItems] = createSignal(itemMap);

const findItemById = createMemo(() => {
    const map = items();
    return map.get(2)?.value || null;
}, [items]);

- **减少数据冗余**：避免在不同的地方重复存储相同的数据，减少更新时的同步开销。

3. 利用 Solid.js 特性 - 合理使用 createEffect：createEffect 可以用于执行副作用操作，并且它的执行时机与 createMemo 不同。如果某些操作不需要返回值，只是响应状态变化执行一些操作（如 API 调用、DOM 操作等），可以使用 createEffect 代替 createMemo。例如：

import { createSignal, createEffect } from'solid-js';

const [count, setCount] = createSignal(0);

// 这里使用 createEffect 而不是 createMemo 执行副作用操作
createEffect(() => {
    console.log('Count has changed:', count());
});

- **细粒度响应式**：Solid.js 的细粒度响应式允许更精确地控制状态变化的通知。利用这一点，确保在状态更新时，只通知到真正依赖该状态变化的 `createMemo` 和组件，避免不必要的重新渲染和计算。可以通过合理拆分组件和 `createMemo`，将依赖关系细化。

星途面试题库

面试题：Solid.js createMemo 在复杂场景下的性能瓶颈与突破

知识考点

面试题答案

可能导致性能瓶颈的原因

解决方案