面试题：Qwik 的 useSignal 与 useStore 在复杂组件结构中的应用

使用 useStore 管理全局配置信息：

在顶层组件中，使用 useStore 创建一个全局状态存储。例如，假设配置信息是一个对象 config，可以这样创建：

import { createStore, useStore } from'solid-js/store';

const [configStore, setConfigStore] = createStore({
    // 初始配置信息
    theme: 'light',
    fontSize: 14
});

function TopLevelComponent() {
    const config = useStore(configStore);
    // 顶层组件的其他逻辑
    return (
        // 子组件树
        <ChildComponent />
    );
}

useStore 提供了一种响应式的数据管理方式，并且在更新时，它会进行细粒度的依赖跟踪，只有依赖被更新部分的组件才会重新渲染。

传递配置信息给子组件：
- 通过 props 将 config 传递给子组件。例如：
```
function ChildComponent() {
    return (
        <GrandChildComponent config={config} />
    );
}
```
- 子组件接收 config 后，可以直接使用其中的配置信息，而不会触发顶层组件的重新渲染，除非子组件触发了对 configStore 的更新。
使用 useSignal 进行局部状态管理（如果需要）：
- 对于子组件中不影响全局配置的局部状态，可以使用 useSignal。例如，某个子组件有一个局部的开关状态：
```
function GrandChildComponent({ config }) {
    const [isSwitchOn, setIsSwitchOn] = createSignal(false);
    // 子组件逻辑，依赖局部状态和全局配置
    return (
        // 组件渲染内容
    );
}
```
- useSignal 提供了简单的响应式状态管理，它与 useStore 配合使用，可以确保子组件内部局部状态的更新不会影响到全局配置相关的重新渲染逻辑。
更新全局配置：
- 当部分子组件需要更新全局配置时，可以通过 setConfigStore 来进行更新。例如，某个子组件有一个切换主题的按钮：
```
function GrandChildComponent({ config }) {
    return (
        <button onClick={() => setConfigStore('theme', config.theme === 'light'? 'dark' : 'light')}>
            Toggle Theme
        </button>
    );
}
```
- 这样的更新操作会利用 useStore 的细粒度依赖跟踪，只重新渲染依赖于 theme 变化的组件，而不会导致整个组件树不必要的重新渲染。

星途面试题库

面试题：Qwik 的 useSignal 与 useStore 在复杂组件结构中的应用

知识考点

面试题答案