- 组件挂载时
- 当组件第一次被渲染并添加到DOM中时，
useEffect中的副作用函数会被执行。例如，在一个组件中需要从API获取数据来初始化页面内容，就可以在useEffect中发送请求。
import React, { useState, useEffect } from "react";
function MyComponent() {
const [data, setData] = useState([]);
useEffect(() => {
fetch('https://example.com/api/data')
.then(response => response.json())
.then(jsonData => setData(jsonData));
}, []);
return ( <div> {data.map((item, index) => ( <p key={index}>{item}</p> ))} </div> );
}
- 在这个例子中，
useEffect中的函数在组件挂载时会执行，从API获取数据并更新组件的状态data，然后组件会根据新的状态重新渲染，展示获取到的数据。
- 组件更新时（依赖项变化）
- 如果
useEffect有依赖项数组，当依赖项中的任何一个值发生变化时，副作用函数就会重新执行。例如，有一个组件根据用户输入的搜索词来获取数据。
import React, { useState, useEffect } from "react";
function SearchComponent() {
const [searchTerm, setSearchTerm] = useState('');
const [searchResults, setSearchResults] = useState([]);
useEffect(() => {
if (searchTerm) {
fetch(`https://example.com/api/search?q=${searchTerm}`)
.then(response => response.json())
.then(jsonData => setSearchResults(jsonData));
}
}, [searchTerm]);
return (
<div>
<input type="text" value={searchTerm} onChange={(e) => setSearchTerm(e.target.value)} />
<div>
{
searchResults.map((result, index) => ( <p key={index}>{result}</p> ))
}
</div>
</div>
);
}
- 这里
useEffect的依赖项是searchTerm，每当searchTerm的值因为用户输入而改变时，useEffect中的函数就会重新执行，根据新的搜索词获取数据并更新searchResults状态，然后组件重新渲染展示新的搜索结果。
- 组件卸载时（用于清理操作）
return ()=>{}// 卸载时执行
useEffect还可以返回一个函数，这个返回的函数会在组件卸载时执行，用于清理副作用。比如，当组件订阅了一个外部数据源或者添加了一个事件监听器，在组件卸载时需要取消订阅或者移除监听器，以避免内存泄漏等问题。
import React, { useState, useEffect } from "react";
function TimerComponent() {
const [count, setCount] = useState(0);
useEffect(() => {
const interval = setInterval(() => {
setCount(count + 1);
}, 1000);
return () => { clearInterval(interval); };
}, []);
return ( <div> <p>Seconds passed: {count}</p> </div> );
}
- 在这个例子中，
useEffect中设置了一个每秒更新count状态的定时器。当组件卸载时，返回的函数会执行，清除定时器，防止定时器在组件不存在的情况下继续运行。
