useEffect
是 React 中的一个 Hook,用于处理副作用操作,如数据获取、订阅或手动更改 DOM 等。它接收两个参数:一个副作用函数和一个依赖数组。当组件渲染后,副作用函数会被执行;如果依赖数组中的值发生变化,副作用函数会再次执行。
自定义 Hook 是一个函数,其名称以 "use" 开头,内部可以调用其他 Hooks。自定义 Hook 允许你在组件之间重用状态逻辑。
假设我们有一个自定义 Hook useFetch
,用于从 API 获取数据并在 useEffect
中更新状态:
import { useState, useEffect } from 'react';
function useFetch(url) {
const [data, setData] = useState(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);
useEffect(() => {
let isMounted = true;
const fetchData = async () => {
try {
const response = await fetch(url);
const result = await response.json();
if (isMounted) {
setData(result);
}
} catch (err) {
if (isMounted) {
setError(err);
}
} finally {
if (isMounted) {
setLoading(false);
}
}
};
fetchData();
return () => {
isMounted = false;
};
}, [url]);
return { data, loading, error };
}
export default useFetch;
useEffect
中更新自定义 Hook 时,可能会遇到“闭包陷阱”问题,即获取到的数据不是最新的。原因:useEffect
中的回调函数形成闭包,捕获了依赖数组中的旧值。
解决方法:
useRef
存储最新值:useRef
存储最新值:useReducer
管理复杂状态:useReducer
管理复杂状态:通过这些方法,可以有效解决在 useEffect
中更新自定义 Hook 时遇到的问题。
高校公开课
云+社区沙龙online [国产数据库]
云+社区沙龙online第6期[开源之道]
Game Tech
Game Tech
Game Tech
微搭低代码直播互动专栏
微搭低代码直播互动专栏
GAME-TECH
高校公开课
领取专属 10元无门槛券
手把手带您无忧上云