React Hooks函数useEffect实现生命周期函数

在写React时，使用class方式书写react组件有明确的生命周期函数，在每个生命周期函数中可以进行各个阶段的一些自定义操作。

 

 

使用const index = () =>{} 书写react组件时如果实现在各个生命周期中完整各种自定义操作呢？

1、初始化阶段类似于componentDidMount

useEffect( () => {
    console.log('初始化阶段 构造')
}, [1]);

2、状态变化时类似与componentDidUpdate

useEffect( () => {
    console.log('监听所有状态变化，有状态变化的就执行')
}, []);

useEffect( () => {
    console.log('监听此变量，如果变量变化，就执行')
}, [组件遍量]);//绑定一个变量

最终、卸载当前组件类似于componentWillUnmount

useEffect(() => {
    return uninstall; // 卸载时，想要进行的操作
},[]);
const uninstall = () => {
    console.log('我被卸载啦');
};

componentDidMount和componentWillUnmount的另一种方案

useEffect(() => {
	console.log("这是模拟componentDidMount钩子函数")
	return () => {//return出来的函数本来就是更新前，销毁前执行的函数，现在不监听任何状态，所以只在销毁前执行
		console.log("这是模拟componentWillUnmount钩子函数")
	}
},[])//第二个参数一定是一个空数组，因为如果不写会默认监听所有状态，这样写就不会监听任何状态，只在初始化时执行一次。

引用：

https://www.csdn.net/tags/MtjaYg4sMjg3MDktYmxvZwO0O0OO0O0O.html

https://blog.csdn.net/weixin_51345674/article/details/114103692

https://www.cnblogs.com/crazycode2/p/11746278.html