面试题：Solid.js 中 Context API 如何使用以避免性能瓶颈

创建 Context

在 Solid.js 中，使用 createContext 来创建 Context。例如：

import { createContext } from 'solid-js';

// 创建一个 Context，初始值为 null
const MyContext = createContext(null);

传递数据

通过 Context.Provider 组件来传递数据。假设我们有一个父组件 Parent，要传递的数据是 user：

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

const MyContext = createContext(null);

const Parent = () => {
  const user = { name: 'John', age: 30 };
  return (
    <MyContext.Provider value={user}>
      {/* 子组件树 */}
    </MyContext.Provider>
  );
};

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

消费数据

子组件可以使用 useContext 来消费 Context 中的数据。例如有一个子组件 Child：

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

const MyContext = createContext(null);

const Child = () => {
  const user = useContext(MyContext);
  return (
    <div>
      <p>Name: {user.name}</p>
      <p>Age: {user.age}</p>
    </div>
  );
};

const Parent = () => {
  const user = { name: 'John', age: 30 };
  return (
    <MyContext.Provider value={user}>
      <Child />
    </MyContext.Provider>
  );
};

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

性能优化原因

避免不必要的重渲染：
- 在传统的 prop 传递方式中，如果一个数据需要从顶层组件传递到深层嵌套的子组件，中间的每一层组件都需要接收并向下传递这个 prop，即使中间层组件本身并不使用这个 prop。这可能会导致中间层组件在其 props 变化时不必要的重渲染。
- 使用 Context API，数据直接从 Provider 传递到消费数据的组件，中间层组件不会因为这个 Context 数据的变化而重渲染，除非它们自己的状态或 props 发生了改变。例如，在上面的例子中，Child 组件消费 MyContext 中的 user 数据，而 Parent 组件到 Child 组件之间的任何中间组件，只要它们不依赖 user 数据，就不会因为 user 的变化而重渲染。
提升开发效率和代码可维护性：
- 对于大型应用，当有一些全局数据（如用户认证信息、主题设置等）需要在多个组件中共享时，使用 Context API 可以避免繁琐的 prop 传递，使代码结构更清晰，提升开发效率。同时，当数据的来源或逻辑发生变化时，只需要在 Provider 处修改，而不需要在众多的中间传递组件中修改，增强了代码的可维护性。

面试题：Solid.js 中 Context API 如何使用以避免性能瓶颈

知识考点

面试题答案

创建 Context

传递数据

消费数据

性能优化原因