面试题：Solid.js自定义Hooks与createContext结合的复杂场景应用

状态结构设计

购物车状态：

type CartItem = {
    productId: string;
    quantity: number;
    price: number;
};
type CartState = {
    items: CartItem[];
    totalPrice: number;
};

用户偏好设置：

type UserPreference = {
    theme: 'light' | 'dark';
    language: 'en' | 'zh' | 'de' |...;
};

商品筛选条件：

type ProductFilter = {
    category: string[];
    priceRange: [number, number];
    rating: number;
};

整体状态结构：

type AppState = {
    cart: CartState;
    userPreference: UserPreference;
    productFilter: ProductFilter;
};

自定义Hooks设计

useAppState：

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

const useAppState = () => {
    const [appState, setAppState] = createSignal<AppState>({
        cart: { items: [], totalPrice: 0 },
        userPreference: { theme: 'light', language: 'en' },
        productFilter: { category: [], priceRange: [0, Infinity], rating: 0 }
    });

    // 处理购物车更新逻辑
    const addToCart = (product: CartItem) => {
        setAppState((prev) => {
            const newItems = [...prev.cart.items, product];
            const newTotalPrice = prev.cart.totalPrice + product.price * product.quantity;
            return {
              ...prev,
                cart: { items: newItems, totalPrice: newTotalPrice }
            };
        });
    };

    // 处理用户偏好更新逻辑
    const setUserPreference = (preference: Partial<UserPreference>) => {
        setAppState((prev) => ({
          ...prev,
            userPreference: {...prev.userPreference,...preference }
        }));
    };

    // 处理商品筛选条件更新逻辑
    const setProductFilter = (filter: Partial<ProductFilter>) => {
        setAppState((prev) => ({
          ...prev,
            productFilter: {...prev.productFilter,...filter }
        }));
    };

    return {
        appState,
        addToCart,
        setUserPreference,
        setProductFilter
    };
};

createContext的使用方式

创建Context：

import { createContext } from'solid-js';

const AppStateContext = createContext<ReturnType<typeof useAppState>>();

在应用顶层提供Context：

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

const appState = useAppState();

render(() => (
    <AppStateContext.Provider value={appState}>
        <App />
    </AppStateContext.Provider>
), document.getElementById('root'));

在子组件中使用Context：

import { createComponent } from'solid-js';
import { AppStateContext } from './AppStateContext';

const CartComponent = createComponent(() => {
    const { appState, addToCart } = useContext(AppStateContext);
    return (
        <div>
            {/* 购物车组件逻辑，使用appState和addToCart */}
        </div>
    );
});

处理状态之间的依赖和更新逻辑

依赖处理：

通过createEffect在Solid.js中处理状态之间的依赖关系。例如，如果商品筛选条件发生变化，可能需要重新计算购物车中符合筛选条件的商品数量或总价。

const useAppState = () => {
    const [appState, setAppState] = createSignal<AppState>({... });

    createEffect(() => {
        const { cart, productFilter } = appState();
        // 根据商品筛选条件过滤购物车商品
        const filteredCartItems = cart.items.filter((item) => {
            // 这里添加具体的筛选逻辑
            return true;
        });
        const newTotalPrice = filteredCartItems.reduce((acc, item) => acc + item.price * item.quantity, 0);
        setAppState((prev) => ({
          ...prev,
            cart: {...prev.cart, items: filteredCartItems, totalPrice: newTotalPrice }
        }));
    });

    // 其他逻辑...

    return { appState,... };
};

更新逻辑：
- 在自定义Hooks中定义的更新函数（如addToCart、setUserPreference、setProductFilter），采用不可变数据更新的方式，确保每次状态更新都是创建新的状态对象，这样可以触发Solid.js的响应式更新机制，同时保持状态的可追溯性和可维护性。
- 对于复杂的更新逻辑，可以将其拆分成多个函数，每个函数负责处理一个特定的更新场景，提高代码的可读性和可维护性。例如，购物车中商品数量的增加和减少可以分别用不同的函数处理。

通过以上设计，基于Solid.js的自定义Hooks与createContext结合的状态管理方案能够有效地管理大型电商应用中复杂的状态，确保系统的可维护性和扩展性。

面试题：Solid.js自定义Hooks与createContext结合的复杂场景应用

知识考点

面试题答案

状态结构设计

自定义Hooks设计

createContext的使用方式

处理状态之间的依赖和更新逻辑