constructor 初始化状态 → render 渲染 → componentDidMount 挂载完成(适合发起网络请求、绑定订阅)shouldComponentUpdate 决定是否重渲染 → render 重新渲染 → componentDidUpdate 更新完成componentWillUnmount 清理定时器、取消订阅、移除事件监听类组件生命周期 | 函数组件 Hooks 替代方案 |
|---|---|
constructor 初始化状态 | useState 初始化状态 |
componentDidMount | useEffect 依赖数组为空 [] |
componentDidUpdate | useEffect 带依赖数组 [dep] |
componentWillUnmount | useEffect 返回清理函数 return () => {...} |
shouldComponentUpdate | React.memo 或 useMemo |
新项目应统一使用函数组件 + useEffect 模式。useEffect 的优势在于可以将"挂载时执行 + 更新时执行 + 卸载时清理"的逻辑整合在同一个函数中,避免类组件中生命周期方法分散的问题。