面试题：Solid.js 中如何直接操作真实 DOM 以实现性能优化

Question

在 Solid.js 项目里，假设需要对一个列表元素进行点击后改变其背景颜色的操作，要求直接操作真实 DOM 来优化性能，请描述具体实现思路，并给出关键代码示例。

Answer 1

1. 实现思路：
   • 首先，在 Solid.js 组件中渲染列表时，给每个列表项添加点击事件监听器。
   • 当点击发生时，通过 document.querySelector 或 document.getElementById 等方法获取对应的真实 DOM 元素。
   • 然后直接操作获取到的 DOM 元素的 style.backgroundColor 属性来改变背景颜色。
2. 关键代码示例：

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

const App = () => {
    const items = ['Item 1', 'Item 2', 'Item 3'];
    const handleClick = (id) => {
        const element = document.getElementById(`item-${id}`);
        if (element) {
            element.style.backgroundColor = 'lightblue';
        }
    };
    return (
        <ul>
            {items.map((item, index) => (
                <li key={index} id={`item-${index}`} onClick={() => handleClick(index)}>
                    {item}
                </li>
            ))}
        </ul>
    );
};

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

在上述代码中，map 函数遍历 items 数组渲染列表项。每个列表项有一个唯一的 id，点击时调用 handleClick 函数，在该函数中通过 id 获取对应的 DOM 元素并改变其背景颜色。