面试题：Solid.js中如何优化列表渲染状态更新

Question

在Solid.js的列表渲染场景下，假设你有一个包含多个任务项的列表，每个任务项有一个完成状态。当用户点击任务项标记为完成时，如何在不影响其他任务项状态更新的性能前提下，高效地更新这个完成状态？请描述实现思路并给出关键代码片段。

Answer 1

实现思路

1. 使用 createSignal 创建任务列表的状态，该状态包含每个任务的完成状态。
2. 利用 map 方法遍历任务列表，渲染每个任务项。
3. 为每个任务项添加点击事件处理函数，在点击时更新对应任务的完成状态。由于 Solid.js 的响应式系统基于细粒度的跟踪，单个任务状态的更新不会触发不必要的重新渲染，从而保证性能。

关键代码片段

import { createSignal } from 'solid-js';

function TaskList() {
  const [tasks, setTasks] = createSignal([
    { id: 1, text: '任务1', completed: false },
    { id: 2, text: '任务2', completed: false }
  ]);

  const handleTaskClick = (taskId) => {
    setTasks(t => t.map(task =>
      task.id === taskId ? { ...task, completed: !task.completed } : task
    ));
  };

  return (
    <ul>
      {tasks().map(task => (
        <li
          key={task.id}
          onClick={() => handleTaskClick(task.id)}
          style={{ textDecoration: task.completed ? 'line-through' : 'none' }}
        >
          {task.text} - {task.completed ? '已完成' : '未完成'}
        </li>
      ))}
    </ul>
  );
}

export default TaskList;