面试题：Solid.js 中 JSX 的列表渲染与 key 的应用

Question

假设有一个数组 `const todos = [{ id: 1, text: '学习 Solid.js' }, { id: 2, text: '完成项目' }, { id: 3, text: '总结经验' }]`，使用 Solid.js 的 JSX 对这个数组进行列表渲染，每个列表项需要包含 todo 的 `text` 且能够响应点击事件来删除该项。请阐述 key 在这个场景中的作用，并给出完整的代码实现。

Answer 1

key的作用

在列表渲染中，key 是 React 和 Solid.js 等框架用来跟踪每个列表项身份的特殊属性。它有助于框架高效地识别哪些列表项发生了变化、添加或删除，从而只更新实际变化的部分，提升性能。如果没有 key，框架可能会错误地重新渲染整个列表，而不是只更新必要的部分。同时，在删除列表项时，正确的 key 能确保框架准确找到要删除的项并更新列表状态。

代码实现

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

const App = () => {
  const [todos, setTodos] = createSignal([
    { id: 1, text: '学习 Solid.js' },
    { id: 2, text: '完成项目' },
    { id: 3, text: '总结经验' }
  ]);

  const handleDelete = (id) => {
    setTodos(todos => todos.filter(todo => todo.id!== id));
  };

  return (
    <ul>
      {todos().map(todo => (
        <li key={todo.id} onClick={() => handleDelete(todo.id)}>
          {todo.text}
        </li>
      ))}
    </ul>
  );
};

export default App;