面试题：Solid.js中信号（Signal）与衍生信号（Derived Signal）的区别及应用场景

主要区别

信号（Signal）
- 本质：是Solid.js中最基础的数据管理单元，它存储一个值，并能在值发生变化时通知依赖它的部分。
- 特性：直接与数据状态绑定，可读写。对信号值的修改会触发响应式更新。
衍生信号（Derived Signal）
- 本质：基于一个或多个现有信号计算得出的信号。它的值依赖于其他信号，当依赖的信号值变化时，衍生信号会重新计算值。
- 特性：通常是只读的，其计算逻辑由开发者定义。衍生信号通过减少不必要的重复计算，优化响应式系统的性能。

应用场景举例

信号（Signal）应用场景
- 场景：用户登录状态管理。
- 代码示例：

import { createSignal } from 'solid-js';

function LoginComponent() {
    const [isLoggedIn, setIsLoggedIn] = createSignal(false);

    const handleLogin = () => {
        setIsLoggedIn(true);
    };

    return (
        <div>
            {isLoggedIn() ? (
                <p>已登录</p>
            ) : (
                <button onClick={handleLogin}>登录</button>
            )}
        </div>
    );
}

说明：这里isLoggedIn信号存储用户的登录状态，setIsLoggedIn用于修改该状态。页面根据isLoggedIn的值决定显示已登录提示还是登录按钮。

衍生信号（Derived Signal）应用场景
- 场景：购物车总价计算，购物车中每个商品有价格和数量信号，计算总价适合用衍生信号。
- 代码示例：

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

function CartComponent() {
    const [itemPrice, setItemPrice] = createSignal(10);
    const [itemQuantity, setItemQuantity] = createSignal(2);

    const totalPrice = createMemo(() => itemPrice() * itemQuantity());

    const increaseQuantity = () => {
        setItemQuantity(itemQuantity() + 1);
    };

    return (
        <div>
            <p>商品价格: {itemPrice()}</p>
            <p>商品数量: {itemQuantity()}</p>
            <p>总价: {totalPrice()}</p>
            <button onClick={increaseQuantity}>增加数量</button>
        </div>
    );
}

说明：totalPrice是衍生信号，依赖itemPrice和itemQuantity信号。当itemPrice或itemQuantity变化时，totalPrice会重新计算，避免了每次变化都手动计算总价的麻烦，优化了性能。

面试题：Solid.js中信号（Signal）与衍生信号（Derived Signal）的区别及应用场景

知识考点

面试题答案

主要区别

应用场景举例