1. 挂载阶段(Mounting)
在函数式组件中,可以使用`useEffect`钩子函数来模拟`componentDidMount`的功能
javascript">import { useEffect, useState } from "react";const MyComponent = () => {const [data, setData] = useState(null);useEffect(() => {fetch("https://api.example.com/data").then((response) => response.json()).then((data) => setData(data));}, []);return <div>{data && <p>{data.message}</p>}</div>;};
2. 更新阶段(Updating)
在函数式组件中,可以在`useEffect`钩子函数中通过检查依赖项的变化来模拟`componentDidUpdate`的功能。
javascript">import { useEffect, useState } from "react";const MyComponent = () => {const [count, setCount] = useState(0);useEffect(() => {console.log("Component updated");}, [count]);return (<div><p>Count: {count}</p><button onClick={() => setCount(count + 1)}>Increment</button></div>);};
3. 卸载阶段(Unmounting)
在函数式组件中,如果使用`useEffect`钩子函数来设置定时器等副作用操作,可以通过返回一个清理函数来模拟`componentWillUnmount`的功能。
javascript">import React, { useEffect, useState } from "react";const MyComponent = () => {useEffect(() => {const timer = setInterval(() => {// 执行定时任务}, 1000);return () => clearInterval(timer);}, []);return <div>{/* 组件内容 */}</div>;};