1.componentDidMount() 模拟： 组件挂载后调用，通常用于发送网络请求或进行初始化操作。
import React, { useEffect, useState } from 'react'; function MyComponent() { useEffect(() => { console.log('Component mounted'); // 在这里执行挂载后的操作，类似于 componentDidMount return () => { console.log('Component will unmount'); // 在组件即将卸载时执行清理操作 }; }, []); // 第二个参数是空数组，表示只在组件挂载和卸载时执行 return <div>Component</div>; }
2.componentDidUpdate() 模拟： 组件更新后调用，可以比较前后的 props 或 state 变化。
import React, { useEffect, useState } from 'react'; function MyComponent(props) { const [data, setData] = useState(props.data); useEffect(() => { console.log('Component updated'); if (data !== props.data) { console.log('Data changed'); } }, [data, props.data]); return ( <div> <button onClick={() => setData('New Data')}>Change Data</button> </div> ); }
3.componentWillUnmount() 模拟： 组件即将卸载前调用，用于清理资源。
import React, { useEffect } from 'react'; function MyComponent() { useEffect(() => { console.log('Component mounted'); return () => { console.log('Component will unmount'); // 在组件即将卸载时执行清理操作 }; }, []); return <div>Component</div>; }
在函数式组件中，useEffect 钩子具有更灵活的用法，它可以模拟多个生命周期方法，而且可以根据依赖项来控制何时触发。上述示例中的 useEffect 钩子参数函数返回的清理函数将在组件卸载前执行，类似于类组件中的 componentWillUnmount。
需要注意，函数式组件和类组件的生命周期虽然相似，但在某些情况下会有细微的差异，特别是在执行时机和依赖项的处理方面。因此，在实际开发中，建议查阅 React 官方文档中有关 useEffect 钩子的详细信息，以便了解如何更好地管理组件的副作用和状态更新。
