面试题：Solid.js 组件嵌套与组合模式下的性能优化策略

可能出现性能问题的场景

过多的重渲染：
- 场景：当父组件状态变化时，即使子组件不需要该状态变化也会跟着重渲染。例如，一个父组件有一个计数器，子组件只是显示静态文本，但由于父子组件嵌套关系，父组件计数器变化会导致子组件重渲染。
- 原因：Solid.js 中，如果组件依赖的数据发生变化，默认会触发该组件及其子组件的重新渲染。
不必要的计算：
- 场景：在组件函数内部进行复杂计算，且每次重渲染都会重新计算。比如在组件中计算一个很大数组的平均值，每次重渲染都执行该计算。
- 原因：没有对计算结果进行缓存，导致重复计算。

性能优化策略及代码示例

使用 createMemo 缓存计算结果：
- 优化前：

import { createSignal } from 'solid-js';

const App = () => {
    const [count, setCount] = createSignal(0);
    const bigArray = Array.from({ length: 10000 }, (_, i) => i + 1);
    const calculateAverage = () => {
        return bigArray.reduce((acc, val) => acc + val, 0) / bigArray.length;
    };
    return (
        <div>
            <button onClick={() => setCount(count() + 1)}>Increment</button>
            <p>Average: {calculateAverage()}</p>
        </div>
    );
};

export default App;

优化后：

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

const App = () => {
    const [count, setCount] = createSignal(0);
    const bigArray = Array.from({ length: 10000 }, (_, i) => i + 1);
    const average = createMemo(() => {
        return bigArray.reduce((acc, val) => acc + val, 0) / bigArray.length;
    });
    return (
        <div>
            <button onClick={() => setCount(count() + 1)}>Increment</button>
            <p>Average: {average()}</p>
        </div>
    );
};

export default App;

说明：createMemo 会缓存计算结果，只有当 bigArray 或依赖的响应式数据变化时才会重新计算，避免了每次重渲染都执行复杂计算。

使用 createEffect 代替在组件内直接执行副作用：
- 优化前：

import { createSignal } from'solid-js';

const App = () => {
    const [count, setCount] = createSignal(0);
    console.log('Component rendered with count:', count());
    return (
        <div>
            <button onClick={() => setCount(count() + 1)}>Increment</button>
            <p>Count: {count()}</p>
        </div>
    );
};

export default App;

优化后：

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

const App = () => {
    const [count, setCount] = createSignal(0);
    createEffect(() => {
        console.log('Count changed to:', count());
    });
    return (
        <div>
            <button onClick={() => setCount(count() + 1)}>Increment</button>
            <p>Count: {count()}</p>
        </div>
    );
};

export default App;

说明：优化前每次组件渲染都会执行 console.log，优化后 createEffect 会在 count 变化时执行，避免了不必要的日志输出。

使用 shouldUpdate 控制组件重渲染：
- 优化前：

import { createSignal } from'solid-js';

const Child = () => {
    return <p>I am a child component</p>;
};

const Parent = () => {
    const [count, setCount] = createSignal(0);
    return (
        <div>
            <button onClick={() => setCount(count() + 1)}>Increment</button>
            <Child />
        </div>
    );
};

export default Parent;

优化后：

import { createSignal } from'solid-js';

const Child = () => {
    return <p>I am a child component</p>;
};

const Parent = () => {
    const [count, setCount] = createSignal(0);
    const shouldUpdate = () => false;
    return (
        <div>
            <button onClick={() => setCount(count() + 1)}>Increment</button>
            <Child shouldUpdate={shouldUpdate} />
        </div>
    );
};

export default Parent;

说明：通过 shouldUpdate 函数返回 false，可以阻止 Child 组件因为父组件 count 变化而重渲染，只有当 shouldUpdate 返回 true 时才会重渲染。

星途面试题库

面试题：Solid.js 组件嵌套与组合模式下的性能优化策略

知识考点

面试题答案

可能出现性能问题的场景

性能优化策略及代码示例