面试题：Solid.js中createMemo的基础应用

Question

在Solid.js项目中，假设有两个响应式状态变量`count1`和`count2`，请使用`createMemo`创建一个派生状态`total`，它是`count1`和`count2`的和。同时解释为什么要使用`createMemo`而不是直接在视图中计算`count1 + count2`。

Answer 1

在Solid.js项目中，可以这样使用createMemo创建派生状态total：

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

const [count1, setCount1] = createSignal(0);
const [count2, setCount2] = createSignal(0);

const total = createMemo(() => count1() + count2());

使用createMemo而不是直接在视图中计算count1 + count2的原因如下：

• 性能优化：createMemo会缓存计算结果，只有当它依赖的响应式状态（count1和count2）发生变化时，才会重新计算。如果直接在视图中计算，每次视图渲染时都会重新计算，这在复杂计算或频繁渲染的场景下会导致性能问题。
• 逻辑分离：使用createMemo将计算逻辑从视图中分离出来，使代码结构更清晰，便于维护和测试。视图只关心展示数据，而计算逻辑集中在createMemo中。