面试题：Solid.js列表渲染中keys属性的基本作用及使用场景

keys属性基本作用

在Solid.js的列表渲染中，keys属性用于给列表中的每一项提供一个唯一标识。它的主要作用是帮助Solid.js高效地追踪列表中元素的变化，从而优化渲染性能并确保渲染的正确性。当列表中的元素顺序改变、添加或删除时，Solid.js可以通过keys准确识别每个元素，避免不必要的重新渲染。

常见场景举例

元素顺序改变：假设我们有一个待办事项列表，用户可以通过拖放来改变事项的顺序。

import { render } from 'solid-js/web';
import { createSignal } from'solid-js';

const [todos, setTodos] = createSignal([
  { id: 1, text: 'Learn Solid.js' },
  { id: 2, text: 'Build a project' },
  { id: 3, text: 'Share knowledge' }
]);

const handleDragEnd = (newOrder) => {
  const newTodos = newOrder.map((index) => todos()[index]);
  setTodos(newTodos);
};

const TodoList = () => {
  const todosValue = todos();
  return (
    <ul>
      {todosValue.map((todo) => (
        <li key={todo.id}>{todo.text}</li>
      ))}
    </ul>
  );
};

render(() => <TodoList />, document.getElementById('app'));

在这个例子中，通过key={todo.id}，即使待办事项顺序改变，Solid.js也能准确知道每个<li>元素对应的是哪个待办事项，只更新必要的DOM，提升性能。

添加或删除元素：考虑一个动态添加和删除用户的用户列表。

import { render } from 'solid-js/web';
import { createSignal } from'solid-js';

const [users, setUsers] = createSignal([
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' }
]);

const addUser = () => {
  const newUser = { id: Date.now(), name: 'New User' };
  setUsers([...users(), newUser]);
};

const removeUser = (userId) => {
  setUsers(users().filter(user => user.id!== userId));
};

const UserList = () => {
  const usersValue = users();
  return (
    <div>
      <button onClick={addUser}>Add User</button>
      <ul>
        {usersValue.map((user) => (
          <li key={user.id}>
            {user.name} 
            <button onClick={() => removeUser(user.id)}>Remove</button>
          </li>
        ))}
      </ul>
    </div>
  );
};

render(() => <UserList />, document.getElementById('app'));

这里使用key={user.id}，当添加或删除用户时，Solid.js能精准地处理DOM操作，保证渲染的正确性和性能。

星途面试题库

面试题：Solid.js列表渲染中keys属性的基本作用及使用场景

知识考点

面试题答案

keys属性基本作用

常见场景举例