类组件与函数组件区别

类组件与函数组件区别解析 link

考察点分析 link

本题考察对React两种组件形态的深层次理解，核心评估以下维度：

1. 生命周期管理能力：对比传统生命周期方法与Hooks的等效实现
2. 状态逻辑模式差异：类组件实例属性与函数组件闭包状态的运作机制
3. 优化策略演进：Hooks时代性能优化方案的范式转变
4. 编程范式差异：面向对象与函数式编程在React中的具体表现
5. 内存管理机制：实例持久化与闭包捕获变量的存储方式

技术解析 link

关键知识点 link

Hooks执行机制 > 类组件生命周期 > 闭包状态管理 > Fiber架构优化策略

原理剖析 link

1. 生命周期映射：

• componentDidMount → useEffect(..., [])
• componentDidUpdate → useEffect(..., [deps])
• componentWillUnmount → useEffect(() => { return cleanup })
• getDerivedStateFromProps → useMemo+状态对比

2. 状态管理差异：

  // 类组件（合并式更新）
this.setState({ count: 1 }) // 自动合并状态对象

// 函数组件（替换式更新）
const [state, setState] = useState({ count: 0 })
setState(prev => ({ ...prev, count: 1 })) // 需手动合并
  

3. 优化策略对比：

• 类组件：shouldComponentUpdate手动比对、PureComponent浅比较
• 函数组件：React.memo包裹、useMemo缓存计算值、useCallback缓存函数引用

常见误区 link

1. 误以为useState立即更新状态（实际是异步批量更新）
2. 在useEffect中遗漏依赖项导致闭包陷阱
3. 错误地在条件语句中使用Hooks破坏调用顺序

问题解答 link

类组件通过继承机制维护组件实例，使用生命周期方法管理副作用，状态存储在this.state中通过合并策略更新。函数组件借助Hooks实现状态持久化，利用闭包捕获渲染时的状态快照，依赖顺序保证来管理副作用。

关键差异点：

1. 生命周期：类组件显式声明周期方法，函数组件通过useEffect组合副作用
2. 状态更新：类组件自动合并状态对象，函数组件需手动合并（使用扩展运算符）
3. 优化策略：类组件使用shouldComponentUpdate阻断渲染链，函数组件通过memo+useMemo实现细粒度控制
4. 逻辑复用：类组件通过HOC/render props，函数组件通过自定义Hook实现更扁平化的逻辑复用

解决方案 link

  // 函数组件优化示例
const OptimizedComponent = React.memo(({ data }) => {
  const [localState, setLocalState] = useState(0)
  
  // 缓存计算结果
  const computedValue = useMemo(() => 
    expensiveCalculation(data), [data])
  
  // 缓存回调函数
  const handler = useCallback(() => {
    setLocalState(prev => prev + 1)
  }, [])

  return <ChildComponent onClick={handler} value={computedValue} />
})

// 边界处理示例
useEffect(() => {
  const controller = new AbortController()
  fetchData(params, { signal: controller.signal })
  return () => controller.abort() // 清理异步操作
}, [params])
  

深度追问 link

1. Hooks闭包陷阱如何避免？
   答：使用useRef保存可变引用，或确保依赖数组完整

2. 如何实现类组件的getSnapshotBeforeUpdate？
   答：目前Hooks无等效API，需结合useLayoutEffect模拟

3. 函数组件性能监控要点？
   答：使用Profiler API，结合useMemo缓存层级控制重渲染范围