SolidJS 和 React 有什么区别？如何选择适合的框架？ - 面试题

SolidJS 和 React 都是现代前端框架，但设计理念和技术实现有显著差异：

核心架构对比：

特性	React	SolidJS
渲染方式	虚拟 DOM + 重新渲染	细粒度响应式 + 直接 DOM 更新
组件执行	每次状态变化重新执行	只执行一次
状态管理	useState, useReducer	createSignal, createStore
副作用处理	useEffect（需声明依赖）	createEffect（自动追踪）
派生状态	useMemo（需声明依赖）	createMemo（自动追踪）
列表渲染	map + key	For, Index 组件
条件渲染	三元运算符, &&, \|\|	Show, Switch 组件

代码对比示例：

javascript
// React
function Counter() {
  const [count, setCount] = useState(0);
  
  useEffect(() => {
    document.title = `Count: ${count}`;
  }, [count]);
  
  const doubled = useMemo(() => count * 2, [count]);
  
  return (
    <div>
      <p>Count: {count}</p>
      <p>Doubled: {doubled}</p>
      <button onClick={() => setCount(c => c + 1)}>+</button>
    </div>
  );
}

// SolidJS
function Counter() {
  const [count, setCount] = createSignal(0);
  
  createEffect(() => {
    document.title = `Count: ${count()}`;
  });
  
  const doubled = createMemo(() => count() * 2);
  
  return (
    <div>
      <p>Count: {count()}</p>
      <p>Doubled: {doubled()}</p>
      <button onClick={() => setCount(c => c + 1)}>+</button>
    </div>
  );
}

性能对比：

SolidJS 在大型列表渲染中性能更优
SolidJS 内存占用更小
React 生态系统更成熟
React 学习资源更丰富

适用场景：

选择 React：团队熟悉 React、需要丰富生态、大型企业应用
选择 SolidJS：追求极致性能、需要细粒度更新、响应式优先的应用

迁移建议：

React 开发者可以快速上手 SolidJS
概念相似但实现方式不同
需要改变思维方式（从重新渲染到响应式更新）