面试题：Solid.js 的 Context API 与 createStore 的结合应用场景

Question

在一个多层嵌套的 Solid.js 应用中，描述一下在哪些场景下你会选择将 Context API 和 createStore 结合使用，以优化状态管理，并举例说明如何实现这种结合。

Answer 1

结合使用场景

1. 跨层级共享状态：当应用中有多层嵌套组件，且某些状态需要在多个不相邻层级间共享时。例如一个电商应用，从顶层导航栏到深层商品详情页都需要共享用户登录状态，以决定是否显示特定功能（如“我的订单”）。
2. 局部复杂状态管理：在某些组件树分支中，存在复杂的状态逻辑，既需要在分支内组件间共享，又不希望污染全局状态。如一个复杂的表单组件树，包含多个子表单和验证逻辑，使用 createStore 管理局部状态，通过 Context API 共享给子组件。

实现示例

1. 创建 createStore：

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

// 创建一个简单的计数器状态
const [counterStore, setCounterStore] = createStore({
    count: 0
});

2. 创建并使用 Context：

import { createContext } from 'solid-js';

// 创建上下文
const CounterContext = createContext();

const App = () => {
    return (
        <CounterContext.Provider value={[counterStore, setCounterStore]}>
            {/* 子组件树 */}
        </CounterContext.Provider>
    );
};

3. 子组件消费：

const ChildComponent = () => {
    const [counterStore, setCounterStore] = useContext(CounterContext);

    const increment = () => {
        setCounterStore('count', (count) => count + 1);
    };

    return (
        <div>
            <p>Count: {counterStore.count}</p>
            <button onClick={increment}>Increment</button>
        </div>
    );
};