当前位置：首页 > news >正文

react中的useEffect

news 2025/8/28 3:39:18

是函数组件中执行的副作用，副作用就是指每次组件更新都会执行的函数，可以用来取代生命周期。

1. 基本用法

import { useEffect } from "react";
useEffect(()=>{console.log('副作用');   
});

2. 副作用分为需要清除的和不需要清除
假如设置一个定时器，当组件卸载时需要将定时器关闭，这就是需要清除的。

需要清除的需要在副作用中返回一个函数即可，返回的函数编写需要的代码逻辑。

import { useEffect } from "react";
useEffect(()=>{return () => {console.log('组件卸载');}
});

不需要清除的就不需要写入return

3. 传入第二个参数
不传入，则组件更新时就会执行。

传入空数组[]

则代表只运行一次(仅在组件挂载和卸载时执行),当副作用没有返回函数时，可以当做生命周期componentDidMount使用，返回函数时可以当做生命周期componentWillUnmount使用

// 当做 componentDidMount使用
import { useEffect } from "react";
useEffect(()=>{console.log('页面渲染完成');
}, []);
// 当做 componentWillUnmount使用
import { useEffect } from "react";
useEffect(()=>{return () => {console.log('组件卸载');}
}, []);

传入数组 [item]

import { useEffect} from "react";
import { useSelector} from "react-redux";const { num } = useSelector((state) => ({num: state.num,
}));
useEffect(()=>{console.log('执行了');
}, [num]);