类组件与函数组件区别

Wed, 05 Mar 2025 12:28:17 +0000

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

考察点分析

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

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

技术解析

关键知识点

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

原理剖析

生命周期映射：

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

状态管理差异：

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

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

优化策略对比：

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

常见误区

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

问题解答

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

组件类型 on ZiYang FrontEnd Interview

类组件与函数组件区别

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

考察点分析 link

技术解析 link

关键知识点 link

原理剖析 link

常见误区 link