面试题：Solid.js 组件组合模式下的复杂状态管理

Question

在一个使用 Solid.js 构建的应用中，有多个组件通过组合模式协同工作，其中涉及复杂的状态管理，如多个组件需要共享部分状态，且某些状态变化会触发一系列不同组件的更新逻辑。请阐述你会如何设计状态管理方案，并结合 Solid.js 的特性（如信号、计算属性等）给出具体的代码实现思路和关键代码片段。

Answer 1

状态管理方案设计思路

1. 利用Solid.js信号：信号（Signals）是Solid.js中用于管理状态的核心机制。对于共享状态，创建一个全局的信号来存储。当信号值发生变化时，依赖该信号的组件会自动重新渲染。
2. 计算属性：对于需要根据其他状态衍生出的状态，使用计算属性（Computed）。计算属性会自动跟踪其依赖的信号，只有依赖的信号变化时才会重新计算。
3. 事件处理与副作用：使用Solid.js的createEffect来处理状态变化带来的副作用，比如触发其他组件的更新逻辑。

代码实现思路

1. 创建共享状态信号：在应用的顶层创建信号，用于存储共享状态。
2. 组件中使用信号：组件通过读取信号的值来渲染，并且在信号值变化时重新渲染。
3. 处理状态变化逻辑：在信号值更新时，通过createEffect来触发一系列不同组件的更新逻辑。

关键代码片段

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

// 创建共享状态信号
const [count, setCount] = createSignal(0);

// 创建计算属性
const doubleCount = createComputed(() => count() * 2);

// 处理状态变化副作用
createEffect(() => {
  console.log('Count has changed to:', count());
  // 这里可以触发其他组件的更新逻辑
});

const App = () => {
  return (
    <div>
      <p>Count: {count()}</p>
      <p>Double Count: {doubleCount()}</p>
      <button onClick={() => setCount(count() + 1)}>Increment</button>
    </div>
  );
};

export default App;

在上述代码中：

• createSignal创建了一个名为count的信号及其更新函数setCount。
• createComputed基于count信号创建了doubleCount计算属性。
• createEffect在count信号变化时打印日志，并且可以在这里添加其他组件更新逻辑。
• 在App组件中，展示了信号和计算属性的值，并通过按钮点击更新count信号。