面试题：Solid.js中信号（Signal）与计算属性（Computed）的基本应用

信号（Signal）的作用

在Solid.js中，信号是一种可观察的数据存储单元，它能跟踪数据的变化。任何依赖于信号的计算或视图部分，在信号值发生改变时都会自动重新运行或重新渲染，以此实现响应式编程。信号提供了一种简单且高效的方式来管理应用程序中的状态。

计算属性（Computed）的作用

计算属性是基于一个或多个信号的值派生出来的新值。它会自动缓存其计算结果，只有当它依赖的信号发生变化时，才会重新计算。这避免了不必要的重复计算，提高了应用的性能。计算属性对于表示那些基于现有状态衍生出来的状态非常有用，比如上述购物车中的总价。

信号与计算属性的区别

计算时机：信号在值改变时直接触发依赖它的部分重新运行；计算属性只有在其依赖的信号变化时才重新计算，且计算结果会被缓存，除非依赖信号变化，否则不会重复计算。
用途：信号用于存储应用程序的基础状态；计算属性用于表示基于基础状态派生出来的状态。

购物车总价计算属性的Solid.js代码实现

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

const App = () => {
  const [quantity, setQuantity] = createSignal(1);
  const price = 10; // 假设商品单价为10

  const totalPrice = createComputed(() => quantity() * price);

  return (
    <div>
      <p>商品数量: {quantity()}</p>
      <p>商品单价: {price}</p>
      <p>总价: {totalPrice()}</p>
      <button onClick={() => setQuantity(quantity() + 1)}>增加数量</button>
    </div>
  );
};

export default App;

原理解释

创建信号：createSignal(1) 创建了一个名为 quantity 的信号，并初始化为 1。setQuantity 是用于更新 quantity 值的函数。
定义计算属性：createComputed(() => quantity() * price) 创建了一个计算属性 totalPrice。它依赖于 quantity 信号和常量 price。每当 quantity 信号的值发生变化时，createComputed 回调函数会被重新执行，重新计算总价。由于计算属性的缓存机制，只要 quantity 不变，无论访问 totalPrice() 多少次，都不会重新计算，提高了性能。
视图渲染：在返回的JSX中，展示了商品数量、单价和总价，并提供了一个按钮用于增加商品数量。每次点击按钮，quantity 信号值改变，触发 totalPrice 计算属性重新计算，视图中的总价也会相应更新。

星途面试题库