面试题：Solid.js结合Context API与createStore处理复杂状态提升场景

设计思路

状态管理：使用createStore在顶层组件创建和管理复杂对象状态，此状态包含数组、嵌套对象等。
状态传递：通过Context API将状态和更新函数传递给底层子组件，使得子组件能够读取和更新状态。
避免不必要重渲染：利用Solid.js的响应式系统特性，Solid.js会自动跟踪依赖，只有依赖状态发生变化的子组件才会更新。对于函数式组件，避免在组件内部创建新的函数（除非必要），因为新函数会导致依赖变化，引起不必要的重渲染。对于类组件，确保shouldComponentUpdate方法正确实现，根据状态变化决定是否更新。

核心代码片段

顶层组件

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

// 创建Context
const StateContext = createContext();

const TopLevelComponent = () => {
  // 创建状态
  const [state, setState] = createStore({
    nestedObject: {
      subObject: {
        value: 'initial value'
      }
    },
    nestedArray: [1, 2, 3]
  });

  // 定义更新状态的函数
  const updateNestedObject = (newValue) => {
    setState('nestedObject.subObject.value', newValue);
  };

  const updateNestedArray = (index, newValue) => {
    setState('nestedArray', arr => {
      const newArr = [...arr];
      newArr[index] = newValue;
      return newArr;
    });
  };

  return (
    <StateContext.Provider value={{ state, updateNestedObject, updateNestedArray }}>
      {/* 子组件树 */}
      <ChildComponent />
    </StateContext.Provider>
  );
};

底层子组件

import { useContext } from 'solid-js';

const ChildComponent = () => {
  const { state, updateNestedObject, updateNestedArray } = useContext(StateContext);

  return (
    <div>
      <p>{state.nestedObject.subObject.value}</p>
      <input
        type="text"
        onChange={(e) => updateNestedObject(e.target.value)}
      />
      <ul>
        {state.nestedArray.map((item, index) => (
          <li key={index}>
            {item}
            <input
              type="number"
              value={item}
              onChange={(e) => updateNestedArray(index, parseInt(e.target.value))}
            />
          </li>
        ))}
      </ul>
    </div>
  );
};

通过上述代码，顶层组件管理复杂对象状态，并通过Context传递给底层子组件，利用Solid.js响应式系统确保状态变化时相关子组件高效更新，避免不必要重渲染。

星途面试题库

面试题：Solid.js结合Context API与createStore处理复杂状态提升场景

知识考点

面试题答案

设计思路

核心代码片段