useEffect
是 React 中的一个 Hook,用于处理组件的副作用操作,比如数据获取、订阅或手动更改 DOM 等。useEffect
接收两个参数:一个函数和一个依赖数组。函数在组件挂载后、更新后或卸载前执行,依赖数组用于指定哪些值变化时应该重新运行这个函数。
useEffect
主要有两种类型:
[]
。假设我们有两个函数 fetchData
和 subscribeToUpdates
,我们希望在组件挂载时只调用它们一次。
import React, { useEffect, useState } from 'react';
const MyComponent = () => {
const [data, setData] = useState(null);
const fetchData = async () => {
const response = await fetch('https://api.example.com/data');
const result = await response.json();
setData(result);
};
const subscribeToUpdates = () => {
// 订阅逻辑
console.log('Subscribed to updates');
};
useEffect(() => {
fetchData();
subscribeToUpdates();
// 清理函数,组件卸载时执行
return () => {
// 取消订阅逻辑
console.log('Unsubscribed from updates');
};
}, []); // 空数组表示只在挂载和卸载时执行
return (
<div>
{data ? <div>{JSON.stringify(data)}</div> : <div>Loading...</div>}
</div>
);
};
export default MyComponent;
[]
作为 useEffect
的第二个参数,确保 fetchData
和 subscribeToUpdates
只在组件挂载时执行一次。useEffect
中返回一个清理函数,用于在组件卸载时执行清理操作,比如取消订阅。通过这种方式,你可以确保 fetchData
和 subscribeToUpdates
只在组件挂载时调用一次,并且在组件卸载时进行必要的清理操作。
领取专属 10元无门槛券
手把手带您无忧上云