面试题：Solid.js Context API 性能优化中的细粒度控制

创建多个Context：
- 不要将所有数据都放在一个Context中。把相关但不同变化频率的数据分别放入不同的Context。例如，将用户信息相关的数据放入UserContext，配置相关的数据放入ConfigContext。这样，当用户信息更新时，只有依赖UserContext的组件会重渲染，而依赖ConfigContext的组件不受影响。
使用Memoization（记忆化）：
- 在Provider组件上：
  - 对于Context的Provider组件，使用createMemo（在Solid.js中）包裹要传递给Context的值。例如：

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

const MyContext = createContext();

const MyProvider = ({ children }) => {
    const data = createMemo(() => {
        // 计算数据逻辑
        return { someValue: 'example' };
    });

    return (
        <MyContext.Provider value={data()}>
            {children}
        </MyContext.Provider>
    );
};

 - 这样，只有当`createMemo`内部依赖的变量发生变化时，`data`才会重新计算，进而触发依赖该Context的组件重渲染。

在Consumer组件上：
- 对于使用Context的组件，可以使用createMemo包裹对Context数据的使用逻辑。例如：

import { createContext, createMemo, useContext } from'solid-js';

const MyContext = createContext();

const MyConsumer = () => {
    const contextValue = useContext(MyContext);
    const memoizedValue = createMemo(() => {
        // 基于contextValue进行一些计算
        return contextValue.someValue + 'processed';
    });

    return <div>{memoizedValue()}</div>;
};

 - 这里`memoizedValue`只有当`contextValue`中影响计算结果的部分发生变化时才会重新计算，从而减少不必要的渲染。

3. 使用Effect的依赖数组：

如果在子组件中，除了使用Context数据，还执行一些副作用操作（如网络请求、订阅事件等），在createEffect（Solid.js中的副作用钩子）中精确指定依赖。例如：

import { createContext, createEffect, useContext } from'solid-js';

const MyContext = createContext();

const MyConsumer = () => {
    const contextValue = useContext(MyContext);

    createEffect(() => {
        // 副作用操作，比如网络请求
        fetch(`/api?param=${contextValue.someValue}`);
        // 只依赖contextValue.someValue，只有它变化时才重新执行副作用
    }, [contextValue.someValue]);

    return <div>{contextValue.someValue}</div>;
};

这样可以确保只有相关的Context数据变化时，副作用才会重新执行，避免不必要的操作导致潜在的性能问题。

拆分组件：
- 将大的组件拆分成更小的组件，使每个组件依赖的Context部分更加明确和细化。例如，有一个大型组件依赖UserContext中的多个属性，将其拆分成几个小的组件，每个小组件只依赖UserContext中的特定属性。这样，当某个属性变化时，只有依赖该属性的小组件会重渲染。例如：

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

const UserContext = createContext();

const UserNameComponent = () => {
    const user = useContext(UserContext);
    return <div>{user.name}</div>;
};

const UserAgeComponent = () => {
    const user = useContext(UserContext);
    return <div>{user.age}</div>;
};

当user.name变化时，只有UserNameComponent会重渲染，UserAgeComponent不受影响。

面试题：Solid.js Context API 性能优化中的细粒度控制

知识考点

面试题答案