面试题：Solid.js复杂场景下createSignal和createEffect的性能协同优化

Question

在一个Solid.js构建的电商产品列表页面，每个产品都有一个库存数量显示和一个添加到购物车按钮。库存数量会随着其他用户的操作实时更新（模拟通过WebSocket获取更新）。当点击添加到购物车按钮时，如果库存大于0，则库存减1并更新显示。请使用createSignal和createEffect设计并实现这个功能，同时阐述在这种复杂场景下如何通过合理使用这两个API来避免不必要的重新渲染，提升性能。

Answer 1

实现代码

import { createSignal, createEffect } from 'solid-js';
import { useWebSocket } from'solidjs-use';

const ProductList = () => {
  // 创建库存信号和设置库存的函数
  const [stock, setStock] = createSignal(10);
  // 创建WebSocket连接
  const { send, data } = useWebSocket('ws://your-websocket-url');

  // 监听WebSocket数据更新库存
  createEffect(() => {
    if (data()) {
      setStock(data().stock);
    }
  });

  const addToCart = () => {
    if (stock() > 0) {
      setStock(stock() - 1);
    }
  };

  return (
    <div>
      <p>库存数量: {stock()}</p>
      <button onClick={addToCart}>添加到购物车</button>
    </div>
  );
};

export default ProductList;

性能优化阐述

1. createSignal：它用于创建响应式数据，在这里库存stock被创建为一个信号。由于createSignal返回的是一个元组，第一个元素是读取器函数，第二个元素是设置器函数。当调用设置器函数setStock时，只有依赖于stock的部分组件会重新渲染。在这个例子中，只有显示库存数量的<p>标签和按钮点击逻辑依赖stock，所以只有这部分相关的DOM更新，避免了整个页面的重新渲染。
2. createEffect：通过createEffect监听WebSocket的数据更新库存。createEffect会在其依赖的数据（这里是data）发生变化时自动重新运行。并且它会智能地追踪依赖关系，只有依赖的数据发生变化时才会触发重新运行，不会因为其他不相关的数据变化而执行。这确保了库存更新逻辑只在有新的WebSocket数据时执行，避免了不必要的库存更新和由此可能引发的重新渲染。同时，由于createEffect内部执行的setStock操作只会影响依赖stock的部分，所以进一步减少了不必要的重新渲染，提升了性能。