面试题：Solid.js createSignal深度原理与优化

Solid.js 中 createSignal 实现响应式系统底层原理

跟踪依赖：
- 在 Solid.js 中，createSignal返回一个包含getter和setter的数组。当在组件渲染函数中调用getter时，Solid.js 会将当前的渲染函数（即副作用函数）记录为依赖。这是通过内部维护的一个全局的依赖跟踪机制实现的。例如，假设有一个组件：
```
import { createSignal } from'solid-js';
const App = () => {
    const [count, setCount] = createSignal(0);
    return <div>{count()}</div>;
};
```
这里count()的调用会将App组件的渲染函数标记为count信号的依赖。
触发更新：
- 当调用setter函数（如setCount）时，Solid.js 会遍历该信号所记录的所有依赖（即那些调用了getter的渲染函数），并标记这些依赖需要重新运行。然后，Solid.js 会在适当的时机（通常是浏览器空闲时）重新运行这些标记为需要更新的渲染函数，从而实现视图的更新。例如：
```
import { createSignal } from'solid-js';
const App = () => {
    const [count, setCount] = createSignal(0);
    return (
        <div>
            <p>{count()}</p>
            <button onClick={() => setCount(count() + 1)}>Increment</button>
        </div>
    );
};
```
当点击按钮调用setCount时，App组件的渲染函数会被标记为需要重新运行，从而更新视图显示新的count值。

针对 createSignal 创建大量信号的性能优化策略

批处理更新：

在 Solid.js 中，可以使用batch函数来批处理多个信号的更新。这样可以避免多次触发不必要的重新渲染。例如，在一个表单提交场景中，可能需要同时更新多个信号：

import { createSignal, batch } from'solid-js';
const App = () => {
    const [name, setName] = createSignal('');
    const [email, setEmail] = createSignal('');
    const handleSubmit = () => {
        batch(() => {
            setName('New Name');
            setEmail('new@example.com');
        });
    };
    return (
        <form onSubmit={handleSubmit}>
            <input type="text" value={name()} onChange={(e) => setName(e.target.value)} />
            <input type="email" value={email()} onChange={(e) => setEmail(e.target.value)} />
            <button type="submit">Submit</button>
        </form>
    );
};

这里使用batch函数，只有一次重新渲染，而不是每次setName或setEmail调用都触发一次重新渲染。

Memoization：

使用createMemo来缓存信号计算的结果。如果一个值是基于多个信号计算得出，且计算过程较为复杂，createMemo可以避免不必要的重复计算。例如，在一个电商购物车场景中，计算购物车总价：

import { createSignal, createMemo } from'solid-js';
const App = () => {
    const [productPrices, setProductPrices] = createSignal([10, 20, 30]);
    const totalPrice = createMemo(() => productPrices().reduce((acc, price) => acc + price, 0));
    return (
        <div>
            <p>Total Price: {totalPrice()}</p>
            <button onClick={() => setProductPrices([...productPrices(), 15])}>Add Product</button>
        </div>
    );
};

只有当productPrices信号变化时，createMemo包裹的计算函数才会重新运行，提高了性能。

Lazy Loading Signals：

在实际项目中，如果某些信号在初始渲染时不需要，可以采用懒加载的方式。例如，在一个大型页面中有一些隐藏的面板，只有在用户点击特定按钮时才显示，相关的信号可以在按钮点击时再创建。

import { createSignal } from'solid-js';
const App = () => {
    const [isPanelVisible, setIsPanelVisible] = createSignal(false);
    let panelSignal;
    if (isPanelVisible()) {
        panelSignal = createSignal('Panel content');
    }
    return (
        <div>
            <button onClick={() => setIsPanelVisible(!isPanelVisible())}>Toggle Panel</button>
            {isPanelVisible() && <p>{panelSignal? panelSignal() : ''}</p>}
        </div>
    );
};

这样可以减少初始渲染时创建的信号数量，提高性能。

星途面试题库

面试题：Solid.js createSignal深度原理与优化

知识考点

面试题答案

Solid.js 中 createSignal 实现响应式系统底层原理

针对 createSignal 创建大量信号的性能优化策略