面试题：Solid.js中信号与计算属性的性能优化

避免不必要的计算属性重新计算

使用 createMemo 并合理设置依赖
- Solid.js 中的 createMemo 可以创建一个计算属性，只有当它的依赖信号发生变化时才会重新计算。
- 示例：

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

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

// 只有 count 变化时，memoizedValue 才会重新计算
const memoizedValue = createMemo(() => {
    return count() * 2;
}, [count]);

// 以下是使用 memoizedValue 的组件
function MyComponent() {
    return (
        <div>
            <p>Memoized Value: {memoizedValue()}</p>
            <button onClick={() => setCount(count() + 1)}>Increment Count</button>
            <input type="text" value={name()} onChange={(e) => setName(e.target.value)} />
        </div>
    );
}

细粒度依赖管理
- 确保 createMemo 的依赖数组准确反映计算属性真正依赖的信号。如果依赖过多，可能会导致不必要的重新计算；依赖过少，则可能导致计算属性在需要更新时未更新。
- 例如，假设我们有一个更复杂的计算属性，依赖于多个信号，但其中一些信号是不相关的：

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

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

// 错误示例，包含了不相关的依赖
// const wrongMemo = createMemo(() => {
//     return count1() + count2();
// }, [count1, count2, irrelevantValue]);

// 正确示例，只包含相关依赖
const correctMemo = createMemo(() => {
    return count1() + count2();
}, [count1, count2]);

管理信号的更新频率

节流（Throttle）
- 可以使用 lodash 等库中的 throttle 函数来限制信号更新的频率。
- 示例：

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

const [scrollY, setScrollY] = createSignal(0);

// 节流函数，每 200 毫秒更新一次
const throttledSetScrollY = throttle((y) => {
    setScrollY(y);
}, 200);

window.addEventListener('scroll', () => {
    throttledSetScrollY(window.scrollY);
});

function ScrollComponent() {
    return (
        <div>
            <p>Scroll Y: {scrollY()}</p>
        </div>
    );
}

防抖（Debounce）
- 当用户输入等操作频繁触发信号更新时，使用防抖可以确保在用户停止操作一段时间后才更新信号。
- 示例：

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

const [searchText, setSearchText] = createSignal('');

// 防抖函数，用户停止输入 500 毫秒后更新信号
const debouncedSetSearchText = debounce((text) => {
    setSearchText(text);
}, 500);

function SearchComponent() {
    return (
        <div>
            <input type="text" onChange={(e) => debouncedSetSearchText(e.target.value)} />
            <p>Search Text: {searchText()}</p>
        </div>
    );
}

星途面试题库

面试题：Solid.js中信号与计算属性的性能优化

知识考点

面试题答案

避免不必要的计算属性重新计算

管理信号的更新频率