面试题：Svelte中Props与Context API在性能优化上的基础应用

Question

在Svelte项目中，假设你有一个组件树，其中父组件需要传递数据给深层子组件。请阐述何时适合直接使用Props传递数据，何时适合使用Context API传递数据，并说明在这两种方式下，怎样做可以更好地优化性能。

Answer 1

直接使用Props传递数据

1. 适用场景：
   • 当数据传递路径比较明确且层级较浅时适合使用Props传递。例如，父组件与直接子组件之间的数据交互，或者在组件树中只有一到两层的传递关系。这种情况下，数据流向清晰，通过Props传递能让组件之间的依赖关系一目了然。
2. 性能优化：
   • 减少不必要的重新渲染：确保父组件只有在数据真正发生变化时才重新渲染。可以通过使用$: derived（在Svelte中）来创建衍生状态，这样当依赖的原始数据未改变时，不会触发不必要的重新渲染。例如，如果父组件有一个对象parentData，其中只有某个属性需要传递给子组件，可以通过$: subData = parentData.specificProperty，然后传递subData给子组件，这样当parentData其他属性变化时，子组件不会重新渲染。
   • 缓存计算结果：如果传递的数据需要进行复杂计算，在父组件中缓存计算结果，避免每次重新渲染都重复计算。例如，计算一个数组的总和$: sum = parentArray.reduce((acc, val) => acc + val, 0)，然后传递sum给子组件。

使用Context API传递数据

1. 适用场景：
   • 当数据需要传递给深层子组件，跨越多个层级，并且多个不同层级的子组件都可能需要该数据时，适合使用Context API。例如，在一个大型应用的组件树中，主题设置、用户认证信息等全局性质的数据，可能需要被多个深层组件使用，使用Context API可以避免在中间层级组件逐一传递Props，使代码更简洁。
2. 性能优化：
   • 细粒度的上下文更新：尽量将上下文数据拆分成多个较小的上下文对象，而不是一个大而全的对象。这样当某个上下文数据变化时，只有依赖该特定上下文的子组件会重新渲染。例如，将用户信息相关的上下文和主题设置相关的上下文分开，当用户信息更新时，不影响依赖主题设置的组件。
   • 使用subscribe的选择性订阅：在子组件中，使用subscribe时可以提供一个回调函数，该回调函数只在数据发生实际有意义的变化时才执行更新操作。例如，const { value: userData } = contextStore.subscribe(data => data, initialValue)，这里通过第二个参数指定初始值，并在回调函数中只对有实际变化的数据进行处理，减少不必要的重新渲染。