react生命周期对照：类组件三个阶段和useEffect

把 useEffect 的依赖数组删了想省事，结果接口请求死循环狂刷，页面直接卡死。搞懂 react生命周期，是绕不过去的一课，接手老项目里的类组件时尤其如此。

类组件的三个阶段

挂载：constructor 初始化 state，render 渲染，componentDidMount 在首次渲染后执行，请求数据、绑定事件常放这里。更新：state 或 props 变化触发 render，shouldComponentUpdate 能拦截不必要的重渲染，componentDidUpdate 里能拿到更新前的值，做对比逻辑。卸载：componentWillUnmount 在组件移除前执行，清定时器、退订阅都在这，忘了清就是内存泄漏。

被淘汰的那批钩子

componentWillMount、componentWillUpdate、componentWillReceiveProps 这三个老钩子在异步渲染下容易出问题，被标记为不安全，React 16.3 起用 getDerivedStateFromProps 和 getSnapshotBeforeUpdate 接班，多数场景它们也能换成更稳的写法。老代码里看到 UNSAFE_ 前缀，就是这些钩子的残留。

函数组件用 useEffect 对应

useEffect(() => { const t = setInterval(tick, 1000); return () => clearInterval(t); }, []);

空依赖数组相当于 componentDidMount，只跑一次；return 的清理函数相当于 componentWillUnmount，卸载和下次执行前都会调；不加依赖数组则每次渲染后都跑，开头说的死循环就是这么来的。另外 React 18 的 StrictMode 下，开发环境会故意把 effect 挂载卸载两遍，专门暴露漏清理的副作用，别当成 bug。

新项目直接函数组件加 hooks，类组件那套知道对应关系、能读懂老代码就行，一个项目里两种写法混着很常见，风格统一交给团队规范。