箭头函数可作为useEffect清理函数，因其天然符合() => void签名；必须返回未执行的函数表达式，不可加括号调用或返回非函数值。
箭头函数可以直接作为 useEffect 的清理函数返回，但必须是**函数表达式**（即定义并返回一个函数），不能是调用结果或立即执行的表达式。
为什么箭头函数能当清理函数？
useEffect 要求清理函数是一个可执行的函数（类型为 () => void 或 () => () => void）。箭头函数天然满足这个签名，只要它没被调用、没加括号、没返回非函数值。
✅ 正确：返回一个未执行的函数
❌ 错误：返回 undefined、void、或调用了函数但没返回函数
立即学习“Java免费学习笔记（深入）”；
Java注释规范Skills
下载
当用户要求为 Java 代码添加注释、修改注释、审查注释、整理注释格式，或要求按照代码注释规范处理 Java 文件时，使用本技能。本技能用于统一生成和维护 Java 类注释模板、按 Git 对比 release 判断版本号、补充每行代码上方中文块注释、调整注释空行规则，并保持 Java 文件 UTF-8 无 BOM 编码。典型触发场景包括：补充类注释、更新 @version、检查 @author 来源、整理行尾注释、把注释放到代码上一行、检查注释是否符合规范、构建前检查 Java 注释风格。
正确写法：返回箭头函数表达式
在 useEffect 回调中，直接 return 一个箭头函数即可：
useEffect(() => {
const timer = setTimeout(() => {
console.log('done');
}, 1000);
// ✅ 正确：返回一个箭头函数作为清理函数
return () => {
clearTimeout(timer);
};
});
等价写法（更紧凑）：
useEffect(() => {
const timer = setTimeout(() => console.log('done'), 1000);
// ✅ 也正确：用箭头函数语法返回清理逻辑
return () => clearTimeout(timer);
});
常见错误写法及原因
-
多写了一对括号：
return () => clearTimeout(timer)();→ 立即执行，返回undefined，不是函数 -
赋值后返回变量：
const cleanup = () => clearTimeout(timer); return cleanup();→ 调用了函数，返回undefined -
忘记 return：
() => clearTimeout(timer)没被 return → 清理函数不会注册 -
返回非函数值：
return 'cleanup';或return 42;→ React 忽略，控制台无报错但不生效
进阶：带参数的清理函数？
不行。React 的清理函数**不接收任何参数**，签名固定为 () => void。如果你需要访问组件内的值（如 props、state），应借助闭包捕获 —— 这正是箭头函数的优势：
useEffect(() => {
const id = props.userId;
const handler = () => console.log('User:', id);
window.addEventListener('click', handler);
// ✅ 闭包自动捕获 id，无需参数
return () => window.removeEventListener('click', handler);
}, [props.userId]);
注意依赖数组要写全，避免闭包捕获过期值。
