面试题：Svelte动态Props在复杂交互组件中的应用与优化

1. 利用动态Props管理表格数据、排序规则和筛选条件

管理表格数据：
- 在Svelte组件中定义一个props对象来接收外部传入的表格数据。例如：

<script>
  export let data = [];
</script>

<table>
  <thead>
    <tr>
      {#each Object.keys(data[0]) as key}
        <th>{key}</th>
      {/each}
    </tr>
  </thead>
  <tbody>
    {#each data as row}
      <tr>
        {#each Object.values(row) as value}
          <td>{value}</td>
        {/each}
      </tr>
    {/each}
  </tbody>
</table>

外部使用组件时，将实际数据传递给组件，如<MyTable data={myDataArray}>。这样，当myDataArray发生变化时，组件会自动重新渲染，显示最新的数据。
管理排序规则：
- 在props中定义一个变量来表示排序字段和排序方向。例如：

<script>
  export let sortBy = null;
  export let sortDirection = 'asc';

  const sortedData = $: {
    if (!sortBy) return data;
    return data.sort((a, b) => {
      if (sortDirection === 'asc') {
        return a[sortBy] < b[sortBy]? -1 : 1;
      } else {
        return a[sortBy] > b[sortBy]? -1 : 1;
      }
    });
  };
</script>

<table>
  <thead>
    <tr>
      {#each Object.keys(data[0]) as key}
        <th on:click={() => {
          if (sortBy === key) {
            sortDirection = sortDirection === 'asc'? 'desc' : 'asc';
          } else {
            sortBy = key;
            sortDirection = 'asc';
          }
        }}>
          {key}
          {sortBy === key && (sortDirection === 'asc'? '▲' : '▼')}
        </th>
      {/each}
    </tr>
  </thead>
  <tbody>
    {#each sortedData as row}
      <tr>
        {#each Object.values(row) as value}
          <td>{value}</td>
        {/each}
      </tr>
    {/each}
  </tbody>
</table>

当点击表头时，sortBy和sortDirection会更新，触发$:块内的计算，重新对数据进行排序。
管理筛选条件：
- 在props中定义筛选条件相关的变量。例如，假设要根据某个字段进行文本筛选：

<script>
  export let filterText = '';
  export let filterBy = null;

  const filteredData = $: {
    if (!filterBy ||!filterText) return sortedData;
    return sortedData.filter(row => row[filterBy].toString().includes(filterText));
  };
</script>

<input type="text" bind:value={filterText} placeholder="Enter filter text">
<select bind:value={filterBy}>
  <option value="">Select filter field</option>
  {#each Object.keys(data[0]) as key}
    <option value={key}>{key}</option>
  {/each}
</select>

<table>
  <thead>
    <tr>
      {#each Object.keys(data[0]) as key}
        <th>{key}</th>
      {/each}
    </tr>
  </thead>
  <tbody>
    {#each filteredData as row}
      <tr>
        {#each Object.values(row) as value}
          <td>{value}</td>
        {/each}
      </tr>
    {/each}
  </tbody>
</table>

当filterText或filterBy发生变化时，filteredData会重新计算，显示符合筛选条件的数据。

2. 数据量较大时动态Props使用的性能优化

虚拟列表：
- 使用虚拟列表技术，如svelte-virtual-list库。它只渲染当前可见区域内的表格行，而不是全部数据。
- 安装库：npm install svelte - virtual - list
- 在组件中使用：

<script>
  import { VirtualList } from'svelte - virtual - list';
  export let data = [];
  const rowHeight = 30;
</script>

<VirtualList
  {data}
  {rowHeight}
  let:index
  let:item
>
  <tr>
    {#each Object.values(item) as value}
      <td>{value}</td>
    {/each}
  </tr>
</VirtualList>

这样，无论数据量多大，始终只渲染一小部分行，大大提升性能。
防抖与节流：
- 对于筛选和排序操作，使用防抖或节流技术。例如，在输入筛选文本时，防抖可以防止频繁触发筛选计算。
- 可以使用lodash库的debounce函数。安装：npm install lodash

<script>
  import { debounce } from 'lodash';
  export let filterText = '';
  export let filterBy = null;

  const doFilter = () => {
    // 实际筛选逻辑
  };

  const debouncedFilter = debounce(doFilter, 300);

  $: {
    if (filterText || filterBy) {
      debouncedFilter();
    }
  }
</script>

这样，在输入筛选文本时，每300毫秒才会执行一次实际的筛选操作，避免了因频繁输入导致的性能问题。
减少不必要的重新渲染：
- 使用$:块进行有条件的计算，确保只有相关的props变化时才重新计算和渲染。例如，在排序和筛选时，只在sortBy、sortDirection、filterText或filterBy变化时才重新计算排序和筛选后的数据。
- 避免在组件的顶级作用域进行大量计算，尽量将计算逻辑封装在响应式的$:块内，以控制重新计算的时机。

星途面试题库

面试题：Svelte动态Props在复杂交互组件中的应用与优化

知识考点

面试题答案

1. 利用动态Props管理表格数据、排序规则和筛选条件

2. 数据量较大时动态Props使用的性能优化