How to manage complex state in SolidJS? What state management solutions are available? - 面试题

SolidJS provides various state management solutions for different complexity scenarios:

Basic State Management:

javascript
// createSignal - Most basic state
const [count, setCount] = createSignal(0);

// createStore - Nested object state
const [state, setState] = createStore({
  user: { name: 'John', age: 25 },
  items: []
});

// Fine-grained update of nested objects
setState('user', 'name', 'Jane');

Derived State:

javascript
// createMemo - Cached computed result
const doubled = createMemo(() => count() * 2);

// createComputed - Immediately executed derived state
const total = createComputed(() => items().reduce((sum, item) => sum + item.price, 0));

Async State:

javascript
// createResource - Async data management
const [data, { mutate, refetch }] = createResource(fetchData, {
  initialValue: null,
  storage: (value) => localStorage.setItem('data', JSON.stringify(value))
});

Cross-component State:

javascript
// Using Context API
const CounterContext = createContext();

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

// Using useStore for global state management
import { useStore } from '@solidjs/store';

Best Practices:

Use createSignal for simple state
Use createStore for complex objects
Use createMemo for computed properties
Use createResource for async data
Use Context or third-party libraries for global state