面试题：Solid.js 中 JSX 与自定义指令的高级结合应用

Question

在 Solid.js 里，你需要创建一个自定义指令 `useHighlight`，当应用到某个元素时，鼠标悬停会使该元素的文本高亮（例如添加黄色背景）。请使用 JSX 语法展示如何将这个自定义指令应用到一个 `<div>` 元素上，并写出 `useHighlight` 指令的完整实现代码，同时解释这种自定义指令在 Solid.js 中相较于传统 DOM 操作的优势。

Answer 1

使用 JSX 语法应用自定义指令到 <div> 元素

import { createSignal } from 'solid-js';
import { createMemo } from'solid-js';
import { createEffect } from'solid-js';
import { onCleanup } from'solid-js';

const useHighlight = (element) => {
    const [isHovered, setIsHovered] = createSignal(false);

    const handleMouseEnter = () => setIsHovered(true);
    const handleMouseLeave = () => setIsHovered(false);

    createEffect(() => {
        if (isHovered()) {
            element.style.backgroundColor = 'yellow';
        } else {
            element.style.backgroundColor = 'transparent';
        }
    });

    createEffect(() => {
        element.addEventListener('mouseenter', handleMouseEnter);
        element.addEventListener('mouseleave', handleMouseLeave);

        onCleanup(() => {
            element.removeEventListener('mouseenter', handleMouseEnter);
            element.removeEventListener('mouseleave', handleMouseLeave);
        });
    });
};

const App = () => {
    return (
        <div use:useHighlight>
            Hover over me to highlight
        </div>
    );
};

export default App;

useHighlight 指令的完整实现代码解释

1. 信号创建：const [isHovered, setIsHovered] = createSignal(false); 创建了一个信号 isHovered 来跟踪鼠标是否悬停在元素上，初始值为 false。
2. 事件处理函数：handleMouseEnter 和 handleMouseLeave 函数分别用于设置 isHovered 信号的值。
3. 响应式效果：createEffect(() => {... }) 创建了一个响应式效果，当 isHovered 信号的值变化时，会根据其值来设置元素的背景颜色。
4. 事件绑定与清理：另一个 createEffect 用于在元素上绑定 mouseenter 和 mouseleave 事件，并在组件卸载时清理这些事件监听器。

自定义指令在 Solid.js 中相较于传统 DOM 操作的优势

1. 响应式与声明式：Solid.js 的自定义指令基于响应式编程模型，通过信号和响应式效果，代码更具声明式，开发者只需描述“是什么”而不是“怎么做”。相比传统 DOM 操作需要手动跟踪状态变化和更新 DOM，Solid.js 能自动处理这些变化。
2. 组件化与复用：自定义指令可以轻松地在多个组件中复用，提高了代码的可维护性和复用性。而传统 DOM 操作往往是分散在各个业务逻辑中，难以复用。
3. 性能优化：Solid.js 采用细粒度的响应式更新策略，只有相关的部分会被重新渲染，而传统 DOM 操作可能导致不必要的全局 DOM 重绘或回流，影响性能。
4. 与框架集成：自定义指令与 Solid.js 的整体框架深度集成，能更好地利用框架提供的其他功能，如依赖跟踪、自动清理等，而传统 DOM 操作需要开发者手动处理这些复杂逻辑。