SolidJS 中如何管理复杂状态？有哪些状态管理方案？

SolidJS 提供多种状态管理方案，适用于不同复杂度的场景：

基础状态管理：

javascript
// createSignal - 最基础的状态
const [count, setCount] = createSignal(0);

// createStore - 嵌套对象状态
const [state, setState] = createStore({
  user: { name: 'John', age: 25 },
  items: []
});

// 细粒度更新嵌套对象
setState('user', 'name', 'Jane');

派生状态：

javascript
// createMemo - 缓存计算结果
const doubled = createMemo(() => count() * 2);

// createComputed - 立即执行的派生状态
const total = createComputed(() => items().reduce((sum, item) => sum + item.price, 0));

异步状态：

javascript
// createResource - 异步数据管理
const [data, { mutate, refetch }] = createResource(fetchData, {
  initialValue: null,
  storage: (value) => localStorage.setItem('data', JSON.stringify(value))
});

跨组件状态：

javascript
// 使用 Context API
const CounterContext = createContext();

function App() {
  const [count, setCount] = createSignal(0);
  return (
    <CounterContext.Provider value={[count, setCount]}>
      <Child />
    </CounterContext.Provider>
  );
}

// 使用 useStore 进行全局状态管理
import { useStore } from '@solidjs/store';

最佳实践：

• 简单状态使用 createSignal
• 复杂对象使用 createStore
• 计算属性使用 createMemo
• 异步数据使用 createResource
• 全局状态使用 Context 或第三方库