面试题：Solid.js中For组件在列表渲染时如何处理动态数组变化

Question

假设你有一个Solid.js应用，使用For组件渲染一个数组。当数组动态增加或删除元素时，For组件如何确保视图正确更新？请描述其原理，并给出一段简单代码示例展示如何添加和删除元素并使视图相应更新。

Answer 1

原理

在Solid.js中，For 组件依赖响应式数据。当数组作为响应式数据发生变化时，Solid.js的细粒度响应式系统会检测到这种变化。Solid.js会重新运行依赖该数组的副作用（这里就是 For 组件的渲染逻辑），从而确保视图能够正确更新。

代码示例

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

const App = () => {
  const [items, setItems] = createSignal<string[]>(['item1', 'item2']);

  const addItem = () => {
    setItems([...items(), `item${items().length + 1}`]);
  };

  const removeItem = () => {
    if (items().length > 0) {
      setItems(items().slice(0, -1));
    }
  };

  return (
    <div>
      <ul>
        <For each={items()}>{(item, index) => <li key={index}>{item}</li>}</For>
      </ul>
      <button onClick={addItem}>添加元素</button>
      <button onClick={removeItem}>删除元素</button>
    </div>
  );
};

export default App;

在上述代码中，通过 createSignal 创建了一个响应式的数组 items 及其更新函数 setItems。For 组件依赖 items 数组进行渲染。点击 “添加元素” 按钮时，通过 setItems 向数组中添加新元素；点击 “删除元素” 按钮时，通过 setItems 从数组中删除最后一个元素。每次数组变化，For 组件都会重新渲染，以反映数组的最新状态。