面试题：Solid.js createMemo 在复杂场景下的缓存应用

理解createMemo的作用：
- createMemo在Solid.js中用于创建一个记忆化的值。它会记住上一次计算的结果，只有当它依赖的响应式数据发生变化时，才会重新计算。

代码示例：

假设我们有一个多层嵌套的数据结构，比如一个包含用户信息和订单列表的对象。用户信息变化不频繁，而订单列表可能频繁变化。

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

const App = () => {
  // 用户信息，相对稳定
  const [user, setUser] = createSignal({ name: 'John', age: 30 });
  // 订单列表，频繁变化
  const [orders, setOrders] = createSignal([]);

  // 使用createMemo来优化对相对稳定数据的计算
  const memoizedUserInfo = createMemo(() => {
    return `User: ${user().name}, Age: ${user().age}`;
  });

  // 这里可以模拟订单变化的操作
  const addOrder = () => {
    setOrders([...orders(), { id: Date.now(), amount: 100 }]);
  };

  return (
    <div>
      <p>{memoizedUserInfo()}</p>
      <button onClick={addOrder}>Add Order</button>
      <ul>
        {orders().map(order => (
          <li key={order.id}>Order ID: {order.id}, Amount: {order.amount}</li>
        ))}
      </ul>
    </div>
  );
};

export default App;

在这个示例中，memoizedUserInfo使用createMemo创建。即使orders频繁变化，只要user不变，memoizedUserInfo就不会重新计算，从而优化了性能。只有当user通过setUser改变时，memoizedUserInfo才会重新计算。

星途面试题库

面试题：Solid.js createMemo 在复杂场景下的缓存应用

知识考点

面试题答案