可以吧useEffect看作是componentDidMount componentDidUpdate componentWillUnmount 三个函数的组合

在https://ant.design/components/button-cn 打开一个codesanbox， 替换下面代码

import React, { useEffect, useState } from "react";
import ReactDom from "react-dom";const App: React.FC = () => {const [data, setData] = useState(1);const [person, setPerson] = useState("zhang");// 写法一： 只要组件数据发生改变就会触发useEffect(() => {console.log("组件挂载或更新执行");});// 写法二； 首次只会触发第一遍， 组件销毁会执行return后的函数useEffect(() => {console.log("组件挂载执行");return () => {console.log("组件卸载之前执行");};}, []);//写法三: 指定数据改变执行useEffect(() => {document.title = 123 + "";return () => {document.title = data + "";console.log("组件卸载之前执行");};}, [data]);return (<>{data}<buttononClick={() => {setData(data + 1);}}>修改数据1</button>{person}<buttononClick={() => {setPerson("zhang san");}}>修改数据2</button><button onClick={() => ReactDom.unmountComponentAtNode("container")}>卸载container组件</button></>);
};export default App;