面试题：Solid.js 中 createMemo 的中等难度应用问题

Question

假设你正在开发一个电商产品详情页面，有一个商品价格和折扣信息，使用 Solid.js 的 createMemo 来优化计算最终价格的逻辑。请写出关键代码片段，并解释为什么这样使用 createMemo 能带来性能提升。

Answer 1

关键代码片段

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

const App = () => {
  const [originalPrice, setOriginalPrice] = createSignal(100);
  const [discountPercentage, setDiscountPercentage] = createSignal(10);

  const finalPrice = createMemo(() => {
    return originalPrice() * (1 - discountPercentage() / 100);
  });

  return (
    <div>
      <p>Original Price: ${originalPrice()}</p>
      <p>Discount Percentage: {discountPercentage()}%</p>
      <p>Final Price: ${finalPrice()}</p>
    </div>
  );
};

export default App;

性能提升原因

1. 避免不必要的重复计算：createMemo 会缓存其返回值，只有当它依赖的信号（在这个例子中是 originalPrice 和 discountPercentage）发生变化时，才会重新计算。如果在组件渲染过程中，有其他部分重新渲染，但这两个信号值没有改变，finalPrice 不会重新计算，节省了计算资源。
2. 提高渲染效率：在电商产品详情页这种场景下，商品价格和折扣信息可能是相对稳定的，不会频繁变化。使用 createMemo 可以确保在这些值未改变时，相关计算不会重复执行，从而提升整个页面的渲染性能，尤其是在复杂计算或者频繁渲染的情况下。