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

Posted 2023-03-07

【中文标题】Svelte - 更新值时防止重新渲染

【英文标题】：Svelte - Prevent re-rendering when updating a value

【发布时间】：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>

【参考方案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>