面试题：Svelte动态组件在响应式更新中的挑战及解决方法

可能遇到的响应式更新问题

不必要的重新渲染：
- 问题阐述：在Svelte中，当动态组件依赖的数据发生变化时，即使数据变化对组件的实际显示没有影响，组件也可能会重新渲染。这是因为Svelte默认会对依赖数据的变化做出响应，导致整个组件重新运行其渲染逻辑。
- 示例：
```
<script>
  let data = { name: 'John' };
  let selectedComponent = 'ComponentA';
  const ComponentA = () => {
    return <div>{data.name}</div>;
  };
  const ComponentB = () => {
    return <div>Component B</div>;
  };
</script>

{#if selectedComponent === 'ComponentA'}
  <ComponentA />
{:else}
  <ComponentB />
{/if}

<button on:click={() => data = {...data, age: 30}}>Change data</button>
```
在这个例子中，点击按钮改变data对象的age属性，虽然ComponentA只依赖name属性，但由于data对象整体发生了变化，ComponentA会重新渲染。

动态组件切换时状态丢失：

问题阐述：当动态切换组件时，之前组件的状态可能会丢失，因为每次切换相当于重新创建组件实例。
示例：

<script>
  let selectedComponent = 'ComponentA';
  const ComponentA = () => {
    let count = 0;
    const increment = () => {
      count++;
    };
    return (
      <div>
        <p>Count: {count}</p>
        <button on:click={increment}>Increment</button>
      </div>
    );
  };
  const ComponentB = () => {
    return <div>Component B</div>;
  };
</script>

{#if selectedComponent === 'ComponentA'}
  <ComponentA />
{:else}
  <ComponentB />
{/if}

<button on:click={() => selectedComponent = 'ComponentB'}>Switch to B</button>

当从ComponentA切换到ComponentB再切换回ComponentA时，ComponentA的count状态会重置为初始值0。

解决方案

避免不必要的重新渲染：

使用$: derived创建独立的响应式数据：

解决方案阐述：通过$: derived可以创建一个依赖于其他数据的新的响应式数据，并且只有当这个新数据真正相关的依赖变化时才会触发更新。
示例：

<script>
  import { derived } from'svelte/store';
  let data = { name: 'John' };
  const nameStore = derived(data, $data => $data.name);
  let selectedComponent = 'ComponentA';
  const ComponentA = () => {
    return <div>{$nameStore}</div>;
  };
  const ComponentB = () => {
    return <div>Component B</div>;
  };
</script>

{#if selectedComponent === 'ComponentA'}
  <ComponentA />
{:else}
  <ComponentB />
{/if}

<button on:click={() => data = {...data, age: 30}}>Change data</button>

这里通过derived创建了nameStore，它只依赖data中的name属性。当改变data的age属性时，ComponentA不会重新渲染。

使用bind:this和setContext/getContext：
- 解决方案阐述：bind:this可以获取组件实例，setContext/getContext可以在父子组件间共享数据而无需通过props层层传递。这样可以更细粒度地控制组件的更新。
- 示例：
```

<script>
  import Child from './Child.svelte';
  let data = { name: 'John' };
  let child;
  const updateChild = () => {
    child.updateData(data.name);
  };
</script>

<Child bind:this={child} />
<button on:click={updateChild}>Update Child</button>


<script>
  let localName;
  export const updateData = (newName) => {
    localName = newName;
  };
</script>

<div>{localName}</div>
```
在这个例子中，Parent组件通过bind:this获取Child组件实例，并在需要时调用Child组件的方法更新数据，避免了因data整体变化导致的不必要重新渲染。

解决动态组件切换时状态丢失：

使用{#key}指令：

解决方案阐述：{#key}指令可以让Svelte在组件切换时保持状态。当key值不变时，Svelte会复用之前的组件实例，而不是重新创建。
示例：

<script>
  let selectedComponent = 'ComponentA';
  let componentKey = 'A';
  const ComponentA = () => {
    let count = 0;
    const increment = () => {
      count++;
    };
    return (
      <div>
        <p>Count: {count}</p>
        <button on:click={increment}>Increment</button>
      </div>
    );
  };
  const ComponentB = () => {
    return <div>Component B</div>;
  };
</script>

{#key componentKey}
  {#if selectedComponent === 'ComponentA'}
    <ComponentA />
  {:else}
    <ComponentB />
  {/if}
{/key}

<button on:click={() => {
  selectedComponent = 'ComponentB';
  componentKey = 'B';
}}>Switch to B</button>
<button on:click={() => {
  selectedComponent = 'ComponentA';
  componentKey = 'A';
}}>Switch to A</button>

这里通过{#key}指令，在切换组件时如果componentKey不变，ComponentA的状态count就会保持。

星途面试题库

面试题：Svelte动态组件在响应式更新中的挑战及解决方法

知识考点

面试题答案

可能遇到的响应式更新问题

解决方案