一、概述
useEffect
是React
提供的一个Hook
,用于在函数组件中执行副作用操作。副作用操作通常包括数据获取、订阅事件、手动操作DOM
等。useEffect
可以让我们在函数组件中模拟类组件的生命周期方法(如componentDidMount
、componentDidUpdate
、componentWillUnmount
)。
二、useEffect
的基本用法和常见场景
1、基本用法:
import React, { useEffect } from 'react';
function MyComponent() {
useEffect(() => {
// 在组件渲染后执行副作用操作
console.log('Component did mount');
return () => {
// 在组件卸载前执行清理操作
console.log('Component will unmount');
};
}, []); // 第二个参数是依赖数组,当依赖发生变化时才会重新执行effect
return <div>My Component</div>;
}
2、数据获取:
import React, { useState, useEffect } from 'react';
function DataFetchingComponent() {
const [data, setData] = useState(null);
useEffect(() => {
fetch('请求接口地址')
.then(response => response.json())
.then(data => setData(data));
}, []); // 只在组件挂载时获取数据
return (
<div>
{data ? <p>{data}</p> : <p>Loading...</p>}
</div>
);
}
3、监听状态变化:
import React, { useState, useEffect } from 'react';
function CounterComponent() {
const [count, setCount] = useState(0);
useEffect(() => {
console.log('Count has changed:', count);
}, [count]); // 监听count的变化,变化则useEffect重新执行
return (
<div>
<p>Count: {count}</p>
<button onClick={() => setCount(count + 1)}>Increment</button>
</div>
);
}
4、清理副作用:
import React, { useEffect } from 'react';
function TimerComponent() {
useEffect(() => {
const timer = setInterval(() => {
console.log('Tick');
}, 1000);
return () => {
clearInterval(timer); // 清除定时器
};
}, []); // 只在组件挂载时设置定时器
return <div>Timer Component</div>;
}
通过useEffect
,我们可以在函数组件中处理各种副作用操作。