1. useEffect的返回函数(在组件销毁时执行的函数)
useEffect被用于在函数组件中模拟生命周期。
举个例子:
function MyComponent() {useEffect(() => {const timer = setInterval(() => console.log('hooooooook!'),1000);return () => clearInterval(timer);}, []);return (<div>Hello</div>); }在这个例子中,组件被挂载时会生成一个计时器,每一秒向控制台输出内容;
在组件被销毁时,这个计时器也应该被清除,否则会造成内存泄漏;
最后的返回函数() => clearInterval(timer)会在组件被销毁时执行,用于清除计时器。
2. useEffect的第二个参数
四个问题:
1. 第二个参数的作用是什么?
在 useEffect 中,第二个参数的作用是监控变更条件,当参数中的数据发生变化之后,就会触发 useEffect 从而实现更新;
2. 为什么第二个参数是数组类型?
因为需要监控的数据可能不止一个;
3. 如果第二个参数留空会怎么样?
如果留空,那么 useEffect 会在每次重新渲染之后执行;
4. 如果传入一个空数组会怎么样?
如果传入空数组,那么 useEffect 只会在初始化时执行一次。
3. 在哪些情况下需要用useEffect这个hook?
很多情况,因为它可以模拟生命周期。
举个栗子,如果在进入页面的时候想调用一个API,那么就用useEffect,传入一个空数组,在初始化的时候就会执行一次。