面试题：Solid.js 条件渲染下复杂交互逻辑的性能优化

条件渲染优化

动态组件：在 Solid.js 中，可以使用动态组件来实现条件渲染。例如：

import { createSignal } from'solid-js';
const [productInStock, setProductInStock] = createSignal(true);

const AddToCartButton = () => {
  const handleClick = () => {
    // 处理库存减少、更新购物车等复杂逻辑
  };
  return <button onClick={handleClick}>加入购物车</button>;
};

const NotifyButton = () => {
  const handleClick = () => {
    // 触发通知订阅流程
  };
  return <button onClick={handleClick}>到货通知</button>;
};

const ProductButton = () => {
  const inStock = productInStock();
  const ButtonComponent = inStock? AddToCartButton : NotifyButton;
  return <ButtonComponent />;
};

避免不必要渲染：Solid.js 会自动跟踪依赖。通过将复杂逻辑封装在函数组件内部，只有当组件的依赖发生变化时才会重新渲染。例如，AddToCartButton 和 NotifyButton 组件只会在它们内部的状态或传递的 props 变化时才重新渲染，而不是每次 productInStock 变化时都重新渲染整个页面。

依赖跟踪优化
- 细粒度依赖：Solid.js 的依赖跟踪非常细粒度。确保在定义信号（signal）时，将相关数据合理分组。比如，如果库存数量和购物车数据有不同的更新频率，可以分别定义信号。
```
const [productStock, setProductStock] = createSignal(10);
const [cartItems, setCartItems] = createSignal([]);
```
- 批处理依赖更新：在处理复杂逻辑时，可能会涉及多个信号的更新。Solid.js 支持批处理更新，以减少不必要的重新渲染。可以使用 batch 函数来批量更新信号。例如：
```
import { batch } from'solid-js';
const handleAddToCart = () => {
  batch(() => {
    setProductStock(prevStock => prevStock - 1);
    setCartItems(prevItems => [...prevItems, { product: 'product - id', quantity: 1 }]);
  });
};
```
这样，在 batch 函数内部的所有信号更新只会触发一次重新渲染，而不是每次更新都触发。

交互逻辑优化

防抖和节流：对于按钮点击这类频繁触发的交互，可以使用防抖（debounce）或节流（throttle）技术。例如，对于“到货通知”按钮，可能不需要每次点击都立即触发通知订阅流程，可以使用防抖函数来限制触发频率。

import { createSignal } from'solid-js';
const [debounceTimer, setDebounceTimer] = createSignal<number | null>(null);
const NotifyButton = () => {
  const handleClick = () => {
    if (debounceTimer()) {
      clearTimeout(debounceTimer());
    }
    const newTimer = setTimeout(() => {
      // 触发通知订阅流程
      setDebounceTimer(null);
    }, 300);
    setDebounceTimer(newTimer);
  };
  return <button onClick={handleClick}>到货通知</button>;
};

事件委托：如果页面上有多个类似的按钮（例如多个产品详情页的按钮），可以使用事件委托来处理点击事件。通过在父元素上添加一个点击事件监听器，根据事件目标来判断是哪个按钮被点击，从而执行相应的逻辑。这可以减少事件绑定的数量，提高性能。

const ProductList = () => {
  const handleClick = (e: MouseEvent) => {
    const target = e.target as HTMLButtonElement;
    if (target.classList.contains('add - to - cart - button')) {
      // 处理加入购物车逻辑
    } else if (target.classList.contains('notify - button')) {
      // 处理到货通知逻辑
    }
  };
  return (
    <div onClick={handleClick}>
      {/* 多个产品详情组件 */}
    </div>
  );
};

面试题：Solid.js 条件渲染下复杂交互逻辑的性能优化

知识考点

面试题答案