前端Wiki/词条/生命周期与 hooks 等价

生命周期与 hooks 等价

定义类组件挂载、更新、卸载三阶段的生命周期，在函数组件里由 hooks 等价承担

类组件的生命周期分三阶段：挂载（constructor → render → componentDidMount）、更新（shouldComponentUpdate → render → componentDidUpdate）、卸载（componentWillUnmount）。函数组件没有这些钩子，而是用 hooks 表达同样的时机：useEffect 的依赖数组决定它何时执行，空数组对应挂载后，有依赖对应更新后，返回的清理函数对应卸载前。

两者并非一一对应，思路要切换：类组件是按时间点写代码，函数组件是按数据依赖写代码。比如每秒自增的定时器，类组件在 componentDidMount 里启动、componentWillUnmount 里清除，函数组件则是一个 useEffect 里既开定时器又 return 清理函数，依赖为空即可。

useEffect 空依赖数组等价 componentDidMount，清理函数等价 componentWillUnmount
有依赖数组等价 componentDidUpdate，依赖变化才重新执行副作用
shouldComponentUpdate 的拦截职责由 React.memo 与 useMemo 承担

JavaScript

import { useState, useEffect } from 'react';

function Timer() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    const timer = setInterval(() => setCount((c) => c + 1), 1000);
    return () => clearInterval(timer);   // 卸载前清理，等价 componentWillUnmount
  }, []);                                 // 空数组：只挂载时执行一次

  return <h3>已运行 {count} 秒</h3>;
}

⚠ 常见误区

在 useEffect 里不返回清理函数，组件卸载后定时器/订阅仍在跑
以为 useEffect 每次渲染都执行等于 componentDidMount——依赖数组控制时机
把类组件三阶段照搬到函数组件，维护一堆无必要的标志变量

🔗 相关词条副作用与 useEffect 依赖数组