在svelte3中，$:reactive语句声明是比HTML元素类属性慢还是快?如何有效地衡量

Question

由于我正在构建一系列每秒更新几次且数量巨大的组件，我想知道下面的第一个解决方案和第二个解决方案之间的FPS是否存在差异：

• 第一个(HTML元素类(

  <script>
  export let className = undefined
  export let something = false
  export let somethingelse = false
  </script>
  <div class={`myCustomClass1 myCustomClass2 ${something ? "myCustomClass3" : "myCustomClass4"}${somethingelse ? "myCustomClass5" : "myCustomClass6"}${className ? ` ${className}` : ""}`}
  >
  Hello!
  </div>
  

• 第二个($：反应性声明(：

  <script>
  export let className = undefined
  export let something = false
  export let somethingelse = false
  $: classes = "myCustomClass1 myCustomClass2${something ? "myCustomClass3" : "myCustomClass4"}${somethingelse ? "myCustomClass5" : "myCustomClass6"}${className ? ` ${className}` : ""} 
  </script>
  <div class={classes}>Hello!</div>
  

基本上：$:反应语句声明是否比HTML元素class属性慢

如何有效地衡量？

Answer 1

我想发表评论，因为这不会直接回答你的问题，但我没有足够的代表

为了将类绑定到变量，svelte有这样的功能，它可能对您更实用：

<script>
export let classIsActive = false;
export let evenShorter = false;
</script>

<div
class:activateClass={classIsActive}
class:evenShorter
class:combinationClass={classIsActive && evenShorter}
/>

Answer 2

在我看来，我认为这两种方法的性能没有差异，因为每次道具更新时，都需要重新计算类属性。

然而，我更喜欢使用$: classes = ...，因为它增加了代码的可读性，而且您可能需要声明一个处理构建类属性逻辑的函数，例如：

export function classNames(...args){
return args.map(arg=>{
if(Array.isArray(arg)){
if(arg.length === 1){
return arg[0]
}

return arg[0] ?arg[1] :arg[2]||''
}
return arg
}).join(' ')
} 

App.svelte

<script>
import {classNames} from './classNames'

export let className = undefined
export let something = false
export let somethingelse = false

$:classnames = classNames("myCustomClass1 myCustomClass2", [something, "myCustomClass3", "myCustomClass4"], [somethingelse, "myCustomClass5","myCustomClass6"], [className])
</script>
<div class={classnames}>
Hello!
</div>