1.useEffect的介绍
- 引用官网的一句话就是:useEffect 就是一个 Effect Hook,给函数组件增加了操作副作用的能力。(你之前可能已经在 React 组件中执行过数据获取、订阅或者手动修改过 DOM。我们统一把这些操作称为“副作用”,或者简称为“作用”。)
- 可以在组件内多次调用
- React 会在每次渲染后调用副作用函数 —— 包括第一次渲染的时候。
- 副作用函数还可以通过返回一个函数来指定如何“清除”副作用。
- React 会在组件卸载的时候执行清除操作(清除操作:也就是useEffect第一个参数的返回函数;介绍的第四点)。
- 它的第二个参数为数组:仅在数组(定义的第二个参数)里面各项有一项发生变化的情况才会触发当前的 userEffect ,否则不触发;
2.useEffect的使用
- 正常使用
import React, { useState, useEffect } from 'react';
const app = (props: any) => {
useEffect(() => {
}, []);
}
export default app
- 清除操作(在进入页面则开启 timer 定时器,离开页面则清除定时器)
import React, { useState, useEffect } from 'react';
const app = (props: any) => {
useEffect(() => {
const timer = setInterval(() => { console.log(1) }, 1000);
return () => {
clearInterval(timer)
}
}, []);
}
export default app
- 第二个参数:监听 numb 变化了则触发当前这个 useEffect
import React, { useState, useEffect } from 'react';
const app = (props: any) => {
useEffect(() => {
console.log(numb)
}, [numb]);
}
export default app
- 当使用 useEffect 出现无限刷新界面的时候,请把第二个参数给定一个空数组
出现无限刷新的原因就是在 useEffect 中修改了 useEffect 监听的值
import React, { useState, useEffect } from 'react';
const app = (props: any) => {
useEffect(() => {
}, []);
}
export default app