当前位置: 代码迷 >> 综合 >> useEffect钩子
  详细解决方案

useEffect钩子

热度:91   发布时间:2024-02-20 23:19:37.0

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,传入一个空数组,在初始化的时候就会执行一次。

  相关解决方案