面试题：Solid.js 复杂应用中的状态管理架构设计

设计思路

状态划分：
- 按功能模块划分：将应用按功能拆分为多个模块，例如用户模块、订单模块等。每个模块有自己独立的状态。例如用户模块可能有用户登录状态、用户信息等状态；订单模块有订单列表、当前选中订单等状态。
- 按层级划分：对于一些全局状态，如应用主题、语言设置等，放在顶层状态管理中。而组件内部的局部状态，如某个按钮的点击状态，就放在组件自身管理。
状态传递和更新：
- Context API：Solid.js 提供了 createContext 来实现状态的跨组件传递。对于共享状态，可以通过创建上下文来让需要的组件消费。例如创建一个用户信息上下文，使得深层组件可以获取用户信息。
- 信号（Signals）：Solid.js 的信号是一种响应式状态管理机制。通过 createSignal 创建信号，组件可以订阅信号的变化。当信号值更新时，依赖该信号的组件会自动重新渲染。
- Actions：定义明确的 action 函数来更新状态。这样可以将状态更新逻辑集中管理，便于追踪和调试。例如在用户模块，定义 login 函数来更新用户登录状态信号。
可维护性和扩展性：
- 模块化：将状态管理逻辑按模块拆分，每个模块有自己的状态、action 和订阅逻辑。这样当应用功能增加或修改时，只需要在对应的模块中进行调整。
- 使用 TypeScript：利用 TypeScript 进行类型定义，明确状态和 action 的类型，提高代码的可读性和可维护性。同时，在扩展功能时，TypeScript 的类型检查可以避免很多潜在错误。

关键代码片段及解释

创建信号和上下文：

import { createSignal, createContext } from'solid-js';

// 创建用户登录状态信号
const [isLoggedIn, setIsLoggedIn] = createSignal(false);

// 创建用户信息信号
const [userInfo, setUserInfo] = createSignal(null);

// 创建用户上下文
const UserContext = createContext({ isLoggedIn, userInfo });

解释：这里使用 createSignal 创建了两个信号 isLoggedIn 和 userInfo，分别表示用户登录状态和用户信息。createContext 创建了一个上下文 UserContext，可以将这两个信号传递给后代组件。 2. 使用上下文和信号：

import { render } from'solid-js/web';
import { UserContext } from './UserContext';

const App = () => {
    const { isLoggedIn, userInfo } = UserContext.useContext();

    return (
        <div>
            {isLoggedIn()? <p>Welcome, {userInfo()?.name}</p> : <p>Please log in</p>}
        </div>
    );
};

render(() => <App />, document.getElementById('app'));

解释：在 App 组件中，通过 UserContext.useContext() 获取上下文的值。然后根据 isLoggedIn 信号的值来决定显示不同的内容。当 isLoggedIn 信号更新时，App 组件会自动重新渲染。 3. 定义 action 函数：

import { createSignal } from'solid-js';

// 创建购物车商品列表信号
const [cartItems, setCartItems] = createSignal([]);

// 添加商品到购物车的 action
const addToCart = (item) => {
    setCartItems([...cartItems(), item]);
};

解释：这里定义了 addToCart 函数作为添加商品到购物车的 action。它通过 setCartItems 更新 cartItems 信号，由于 cartItems 是响应式信号，依赖它的组件会自动更新。

星途面试题库

面试题：Solid.js 复杂应用中的状态管理架构设计

知识考点

面试题答案

设计思路

关键代码片段及解释