组件差异

Question

这个问题可能会很简单。

假设有以下 Svelte 组件：

{#if condition}
  <A>
{:else}
  <B>
{/if}

其中 A 和 B 是其他 Svelte 组件。问题是：

• B 手术 与 A 有区别吗？
• A完全被B取代了吗？

这个问题有两个用例：

• 穷人路由可以通过如前所示的分支来实现。当路由组件足够相似时，最小化路由组件之间的更新很有趣
• 我有一个案例，其中 B 是 A，但我不确定是让编译器完成它的工作，还是使用带有额外参数的父组件来编码 A 和 B 之间的变化：

...
...
{#if condition}
  ... The A-only part
{/if}
...
{#if other condition}
 ... The B-only part
{/if}
...

Answer 1

A 完全替换为 B，与虚拟 DOM 算法一样。这部分只是为了简单起见，也是为了正确性 — A 和 B 在概念上 不同，即使它们具有相似的结构，所以重要的是新组件不继承任何状态那是在旧的 DOM 中（正在进行的 CSS 动画、焦点状态等）。 'Surgical' 适用于 在 组件内的状态更改。