React中Class 组件 vs Hooks 对照_react class写法和hooks写法-CSDN博客

1、Class 组件 vs Hooks 对照

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

2、示例代码

1. Class 组件写法

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 来表达，只是依赖数组的不同决定了它模拟哪一个生命周期。