React中Class 组件 vs Hooks 对照

黄毛火烧雪下2025-09-25 1:02

1、Class 组件 vs Hooks 对照

类组件生命周期	Hooks 对应写法	说明
`componentDidMount`	`useEffect(() => { ... }, [])`	组件挂载时执行一次
`componentDidUpdate`	`useEffect(() => { ... }, [deps])`	依赖项变化时执行
`componentWillUnmount`	`useEffect(() => { return () => {...} }, [])`	卸载时执行清理逻辑

2、示例代码

1. Class 组件写法

bash 复制代码

import React from 'react';

class Child extends React.Component {
  componentDidMount() {
    console.log("挂载完成 componentDidMount");
  }

  componentDidUpdate() {
    console.log("更新完成 componentDidUpdate");
  }

  componentWillUnmount() {
    console.log("卸载 componentWillUnmount");
  }

  render() {
    return <div>计数：{this.props.count}</div>;
  }
}

2. Hooks 写法（函数组件）

import React, { useEffect } from 'react';

function Child({ count }) {

// 模拟 componentDidMount + componentWillUnmount

useEffect(() => {

console.log("挂载完成 (相当于 componentDidMount)");

复制代码

return () => {
  console.log("卸载 (相当于 componentWillUnmount)");
};

}, []); // 空依赖 → 只在挂载和卸载时运行

// 模拟 componentDidUpdate

useEffect(() => {

console.log("更新完成 (相当于 componentDidUpdate)，count=", count);

}, [count]); // count 变化时触发

return
计数：{count}
;
}

3、总结

componentDidMount → useEffect(() => {...}, [])

componentDidUpdate → useEffect(() => {...}, [依赖])

componentWillUnmount → useEffect 的清理函数

👉 所以在 Hooks 中，所有生命周期逻辑都通过 useEffect 来表达，只是依赖数组的不同决定了它模拟哪一个生命周期。