面试题：Svelte中Action的生命周期及应用场景

Svelte中Action的生命周期

创建阶段：

当一个组件渲染时，如果它应用了某个Action，Action的创建函数会被调用。这个函数接收两个参数：当前绑定Action的DOM元素和传递给Action的任何参数。例如：

<script>
function myAction(node, param) {
    // 这里可以执行初始化操作，比如添加事件监听器
    node.addEventListener('click', () => {
        console.log(`Clicked with param: ${param}`);
    });
    return {
        // 可以返回一个对象，其中包含update和destroy函数
    };
}
</script>

<div use:myAction={42}>Click me</div>

在创建函数内部，可以进行一些初始化操作，比如设置DOM元素的初始样式、添加事件监听器等。

更新阶段：

如果Action有传入参数，并且这些参数发生了变化，Action的更新函数会被调用。在创建函数返回的对象中定义update函数来处理更新逻辑。例如：

<script>
let value = 0;
function myAction(node, param) {
    node.textContent = `Value: ${param}`;
    return {
        update(newParam) {
            node.textContent = `Value: ${newParam}`;
        }
    };
}
</script>

<button on:click={() => value++}>Increment</button>
<div use:myAction={value}>Value display</div>

这里，每次value变化时，update函数会被调用，从而更新DOM元素的文本内容。

销毁阶段：

当组件从DOM中移除时，Action的销毁函数会被调用。在创建函数返回的对象中定义destroy函数来处理清理操作。例如：

<script>
function myAction(node, param) {
    const intervalId = setInterval(() => {
        console.log(`Interval with param: ${param}`);
    }, 1000);
    return {
        destroy() {
            clearInterval(intervalId);
        }
    };
}
</script>

{#if show}
    <div use:myAction={42}>Interval running</div>
{/if}
<button on:click={() => show =!show}>Toggle</button>

这里，当组件被移除（show变为false）时，destroy函数会被调用，从而清除定时器，避免内存泄漏。

使用Action比直接操作DOM更有优势的场景

复杂动画：
- 代码封装与复用：使用Action可以将复杂动画的逻辑封装起来，方便在多个组件中复用。例如，创建一个animateOpacity Action，在不同组件中使用它来实现淡入淡出效果，而不需要在每个组件中重复编写相同的动画代码。
```
<script>
function animateOpacity(node, { duration = 1000, from = 0, to = 1 }) {
    node.style.opacity = from;
    const anim = node.animate([{ opacity: from }, { opacity: to }], {
        duration,
        fill: 'forwards'
    });
    return {
        destroy() {
            anim.cancel();
        }
    };
}
</script>

<div use:animateOpacity={{ duration: 2000, from: 0, to: 1 }}>Fade in</div>
```
- 生命周期管理：利用Action的生命周期，在动画开始时（创建阶段）进行初始化设置，在参数变化时（更新阶段）调整动画，在组件移除时（销毁阶段）停止动画，确保动画资源得到正确管理，避免潜在的性能问题。

交互逻辑：

事件处理与解耦：在处理复杂交互逻辑时，Action可以将事件处理逻辑封装起来，使组件代码更清晰。例如，创建一个dragAndDrop Action来处理元素的拖放逻辑，组件只需要应用这个Action，而不需要关心具体的事件绑定和处理细节。

<script>
function dragAndDrop(node) {
    let isDragging = false;
    let initialX, initialY;
    node.addEventListener('mousedown', (e) => {
        isDragging = true;
        initialX = e.clientX - node.offsetLeft;
        initialY = e.clientY - node.offsetTop;
    });
    document.addEventListener('mousemove', (e) => {
        if (isDragging) {
            node.style.left = (e.clientX - initialX)+ 'px';
            node.style.top = (e.clientY - initialY)+ 'px';
        }
    });
    document.addEventListener('mouseup', () => {
        isDragging = false;
    });
    return {
        destroy() {
            node.removeEventListener('mousedown', () => {});
            document.removeEventListener('mousemove', () => {});
            document.removeEventListener('mouseup', () => {});
        }
    };
}
</script>

<div use:dragAndDrop style="position: relative;">Draggable element</div>

动态参数调整：如果交互逻辑需要根据不同的参数进行动态调整，Action的更新阶段可以方便地处理这种情况。比如，根据不同的阈值来调整拖放元素的灵敏度，只需要在组件中更新传递给dragAndDrop Action的参数，update函数就会处理相应的逻辑调整。

星途面试题库

面试题：Svelte中Action的生命周期及应用场景

知识考点

面试题答案

Svelte中Action的生命周期

使用Action比直接操作DOM更有优势的场景