面试题：Solid.js中createSignal在复杂场景下的应用

Question

假设你正在开发一个待办事项列表应用，使用Solid.js构建。列表项可以被标记为已完成或未完成。请使用createSignal来管理每个待办事项的完成状态，同时实现一个功能，能够统计已完成的待办事项数量。描述你的设计思路，并给出关键代码片段，解释如何利用createSignal来处理这种状态管理和数据计算。

Answer 1

设计思路

1. 状态管理：使用 createSignal 为每个待办事项创建一个信号来管理其完成状态。createSignal 会返回一个数组，包含获取值的函数和更新值的函数。
2. 统计已完成事项数量：遍历待办事项列表，根据每个事项的完成状态信号来计算已完成的数量。

关键代码片段

import { createSignal } from 'solid-js';

// 模拟待办事项列表
const todos = [
  { id: 1, text: '学习Solid.js', completed: false },
  { id: 2, text: '完成项目文档', completed: false }
];

// 创建状态和更新函数数组
const todoSignals = todos.map(todo => {
  const [completed, setCompleted] = createSignal(todo.completed);
  return { ...todo, completed, setCompleted };
});

// 计算已完成事项数量
const completedCount = () => {
  return todoSignals.filter(todo => todo.completed()).length;
};

代码解释

1. 创建待办事项状态信号：map 函数遍历 todos 数组，为每个待办事项创建一个 completed 信号和对应的 setCompleted 更新函数，并将它们添加到 todoSignals 数组中。
2. 计算已完成事项数量：completedCount 函数通过 filter 方法遍历 todoSignals，筛选出 completed 信号值为 true 的待办事项，然后返回其长度，即已完成事项的数量。这样就利用 createSignal 完成了状态管理和数据计算。