Svelte - 更新值时防止重新渲染答案

【问题标题】：Svelte - Prevent re-rendering when updating a valueSvelte - 更新值时防止重新渲染
【发布时间】：2021-09-02 16:28:59
【问题描述】：

我正在制作一个基于 CSS 的自定义动画，如下所示，但我不想在初始渲染时制作动画。起初，我认为我可以很容易地实现这一点，创建一个在挂载时设置的新标志。但是，我不确定如何实现这一点，因为我在顶层创建的所有变量都会在更新时导致重新渲染。

我了解到在顶层声明的任何内容都会导致重新渲染分配。所以，我不得不在函数中创建这个标志，但是这样做并不能让我访问 HTML 中的变量。我怎样才能做到这一点？

    <script lang="ts">
      import { onMount } from 'svelte';
      import classnames from 'classnames';

      let element: HTMLDivElement;
      let mounted = false;

      onMount(() => {
        const animationEndHandler = () => {
          element.classList.remove(animation);
        };
        element.addEventListener('animationend', animationEndHandler);

        mounted = true; // This needs to not cause re-rendering.

        return () => {
          element.removeEventListener('animationend', animationEndHandler);
        };
      });

      export let animate: boolean;
      export let animation: string;
    </script>

    <div
      class={classnames('animated', { [animation]: animate && mounted })} // <== This attaches the variable `animation` when `animate && mounted` is true.
      bind:this={element}
    >
      <slot />
    </div>

【问题讨论】：

标签： svelte svelte-3

【解决方案1】：

我通过创建一个整数计数器来解决它并验证它是否大于 0。这很难看，但我找不到任何其他方法。

【讨论】：

【解决方案2】：

如果在 onMount 中添加“类”而不是在元素上使用 class 指令，应该可以正常工作吗？（唯一的一点是，我们还需要将 css 动画类名添加到 :global() 范围内，因为 svelte 可能会删除未使用的 css 类）。

<script>
    onMount(() => {
        const animationEndHandler = () => {
            element.classList.remove(animation);
        };
        element.addEventListener('animationend', animationEndHandler);

        element.classList.add(animation);

        return () => {
            element.removeEventListener('animationend', animationEndHandler);
        };
    });
</script>

【讨论】：