面试题：Solid.js中如何通过组件架构优化性能

合理设计组件架构优化性能的方法 - 组件拆分与粒度控制

原理：将复杂组件拆分成多个粒度更小、职责单一的子组件。这样每个子组件只关注自身的逻辑和状态，避免不必要的重新渲染，提高渲染效率。例如，对于一个包含多种功能的大型表单组件，可以拆分成输入框组件、下拉框组件、按钮组件等，每个子组件独立管理自己的状态和渲染逻辑。
优势：
- 减少重新渲染范围：当某个子组件状态变化时，只触发该子组件及其依赖组件的重新渲染，而不会导致整个大组件重新渲染。
- 便于代码维护：每个子组件职责清晰，代码结构更易读、维护和扩展。

在列表渲染组件中的应用

假设场景：在一个待办事项列表应用中，需要渲染一个包含待办事项描述、完成状态、操作按钮（删除、标记完成）的列表。
具体实现：
- 创建子组件：
  - TodoItem 组件：负责渲染单个待办事项的具体内容，接收待办事项的数据作为 props，例如 {text, isCompleted}。这个组件内部只关注单个待办事项的显示和交互逻辑，如点击标记完成按钮改变 isCompleted 状态。
  - TodoList 组件：负责管理整个待办事项列表的数据和渲染逻辑。它会遍历待办事项列表数据，为每个事项渲染一个 TodoItem 组件。
- 代码示例：

import { createSignal } from 'solid-js';

// TodoItem 组件
const TodoItem = ({ text, isCompleted, onToggle, onDelete }) => {
  return (
    <li>
      <input type="checkbox" checked={isCompleted} onChange={onToggle} />
      <span style={{ textDecoration: isCompleted? 'line-through' : 'none' }}>{text}</span>
      <button onClick={onDelete}>删除</button>
    </li>
  );
};

// TodoList 组件
const TodoList = () => {
  const [todos, setTodos] = createSignal([
    { id: 1, text: '学习 Solid.js', isCompleted: false },
    { id: 2, text: '完成项目文档', isCompleted: false }
  ]);

  const toggleTodo = (id) => {
    setTodos(todos => todos.map(todo =>
      todo.id === id? { ...todo, isCompleted:!todo.isCompleted } : todo
    ));
  };

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

  return (
    <ul>
      {todos().map(todo => (
        <TodoItem
          key={todo.id}
          text={todo.text}
          isCompleted={todo.isCompleted}
          onToggle={() => toggleTodo(todo.id)}
          onDelete={() => deleteTodo(todo.id)}
        />
      ))}
    </ul>
  );
};

在上述示例中，TodoList 组件只负责管理列表数据和传递数据给 TodoItem 子组件，而 TodoItem 子组件专注于单个事项的渲染和交互。当某个待办事项状态改变时，只有对应的 TodoItem 组件会重新渲染，而不是整个列表，从而提升了性能。

星途面试题库

面试题：Solid.js中如何通过组件架构优化性能

知识考点

面试题答案

合理设计组件架构优化性能的方法 - 组件拆分与粒度控制

在列表渲染组件中的应用