面试题：Solid.js 中 useContext 的基本使用

创建并使用 useContext 实现跨组件状态共享

创建上下文：在 Solid.js 中，首先要创建上下文对象。可以使用 createContext 函数。假设我们要传递用户登录状态，代码如下：
```
import { createContext } from'solid-js';

const LoginContext = createContext();

export default LoginContext;
```

在顶层组件 App 中提供上下文：在 App 组件中，设置上下文的值。假设我们有一个 isLoggedIn 状态表示用户登录状态。

import { createSignal } from'solid-js';
import LoginContext from './LoginContext';

const App = () => {
    const [isLoggedIn, setIsLoggedIn] = createSignal(false);

    return (
        <LoginContext.Provider value={isLoggedIn}>
            {/* 其他子组件 */}
        </LoginContext.Provider>
    );
};

export default App;

在深层组件 Child 中使用上下文：在 Child 组件中，通过 useContext 来获取上下文的值。

import { useContext } from'solid-js';
import LoginContext from './LoginContext';

const Child = () => {
    const isLoggedIn = useContext(LoginContext);
    return (
        <div>
            {isLoggedIn()? '已登录' : '未登录'}
        </div>
    );
};

export default Child;

useContext 与传统 props 传递的区别

传递方式：
- props 传递：是一种自上而下的单向数据流动方式，父组件将数据通过 props 属性传递给子组件，子组件再依次向下传递给更深层的子组件。如果有多层嵌套，会导致 props 层层传递，代码冗余，即所谓的“props 钻取”问题。
- useContext：它允许跨组件层级直接共享数据，无需在中间组件层层传递。数据可以被任何位于 Provider 组件树内的组件访问，打破了组件层级的限制。
应用场景：
- props 传递：适用于组件之间有明确的父子关系，且数据传递层级较浅的场景。比如一个按钮组件接收父组件传递的文本和点击事件处理函数。
- useContext：适用于需要在多个不相关组件之间共享状态，或者状态需要跨越多个层级传递的场景。例如应用的全局用户登录状态、主题设置等。
性能影响：
- props 传递：当父组件状态更新时，只有直接接收更新 props 的子组件会重新渲染。如果 props 没有变化，子组件不会重新渲染，相对性能消耗较为可控。
- useContext：当 Provider 的 value 发生变化时，所有使用该上下文的组件都会重新渲染，即使它们本身并没有直接依赖这个变化的数据。因此在使用 useContext 时，需要注意 value 的稳定性，避免不必要的重新渲染。

面试题：Solid.js 中 useContext 的基本使用

知识考点

面试题答案

创建并使用 useContext 实现跨组件状态共享

useContext 与传统 props 传递的区别