理解React useEffectEvent：解决useEffect依赖问题的新方法
react的useEffectEvent是一个比较新的api，它专门用来解决useEffect中的依赖项问题。学习这个API需要一些理解成本，但掌握后能让你的代码更加清晰。
为什么需要useEffectEvent？
要理解useEffectEvent，先要了解React官方的一个建议：在useEffect中使用到的所有state和props都应该作为依赖项列出。
ESLint规则也会强制我们这样做，否则会给出警告。但在实际项目中，我们常常会忽略这些警告，因为：
有些依赖项变化时，我们确实需要重新执行useEffect
有些依赖项变化时，我们不希望重新执行useEffect
第二种情况就容易引发问题。过去，我们只能小心翼翼地设计useEffect的依赖项来避免这些问题。
理解闭包陷阱
先看一个具体的例子：
import { useState, useEffect } from 'react';
function Timer() {
const [count, setCount] = useState(0);
const [increment, setIncrement] = useState(1);
useEffect(() => {
const id = setInterval(() => {
setCount(c => c + increment);
}, 1000);
return () => {
clearInterval(id);
};
}, []); // 空依赖数组
function incrementHandler() {
setIncrement(i => i + 1);
}
function decrementHandler() {
setIncrement(i => i - 1);
}
return (
<div>
<div>计数: {count}</div>
<div>增量: {increment}</div>
<button onClick={incrementHandler}>增加增量</button>
<button onClick={decrementHandler}>减少增量</button>
</div>
);
}这个计时器每秒增加count的值，增量由increment状态控制。但这里有个问题：当我们点击按钮改变increment时，计时器仍然使用初始的increment值（1），而不是最新的值。
这就是闭包陷阱。
为什么会这样？
组件函数和setInterval回调函数都使用了increment变量，形成了闭包。由于useEffect的依赖数组是空的，其中的回调函数在初始化后就被缓存，后续渲染中使用的都是最初捕获的increment值。
常规解决方案
最简单的解决办法是把increment加入依赖数组：
useEffect(() => {
const id = setInterval(() => {
setCount(c => c + increment);
}, 1000);
return () => {
clearInterval(id);
};
}, [increment]); // 添加increment作为依赖这样每次increment变化时，useEffect都会重新执行，使用最新的increment值。
新问题出现
但这种方法带来了新问题：我们原本不希望increment变化时重新执行useEffect。快速点击增减按钮时，计时器会不断重启，计数器的变化会暂停，这不符合我们的预期。
区分状态值和逻辑值
要理解更好的解决方案，需要先分清两种值：
状态值：驱动UI变化的值，用useState定义
逻辑值：参与逻辑运算但不直接驱动UI的值，用useRef定义
当某个值既是状态值又是逻辑值时，就容易出现闭包陷阱。上面的increment就是这种情况：它既要显示在UI上（状态值），又要参与计时器的逻辑计算（逻辑值）。
传统解决方案
过去我们会把这个值拆分成两个：
import { useState, useEffect, useRef } from 'react';
function Timer() {
const [count, setCount] = useState(0);
const [increment, setIncrement] = useState(1); // 状态值
const incrementRef = useRef(1); // 逻辑值
useEffect(() => {
const id = setInterval(() => {
setCount(c => c + incrementRef.current); // 使用ref
}, 1000);
return () => {
clearInterval(id);
};
}, []); // 空依赖数组
function incrementHandler() {
setIncrement(i => i + 1); // 更新状态值
incrementRef.current += 1; // 同步更新逻辑值
}
function decrementHandler() {
setIncrement(i => i - 1);
incrementRef.current -= 1;
}
return (
<div>
<div>计数: {count}</div>
<div>增量: {increment}</div> {/* 显示状态值 */}
<button onClick={incrementHandler}>增加增量</button>
<button onClick={decrementHandler}>减少增量</button>
</div>
);
}这种方法能解决问题，但理解起来比较抽象，需要维护两个同步的值。
useEffectEvent的解决方案
useEffectEvent提供了更直观的解决方案：
import { useState, useEffect, useEffectEvent } from 'react';
function Timer() {
const [count, setCount] = useState(0);
const [increment, setIncrement] = useState(1);
// 使用useEffectEvent定义事件处理函数
const incrementEvent = useEffectEvent(() => {
setCount(c => c + increment);
});
useEffect(() => {
const id = setInterval(incrementEvent, 1000);
return () => clearInterval(id);
}, []); // 空依赖数组，不需要包含increment
function incrementHandler() {
setIncrement(i => i + 1);
}
function decrementHandler() {
setIncrement(i => i - 1);
}
return (
<div>
<div>计数: {count}</div>
<div>增量: {increment}</div>
<button onClick={incrementHandler}>增加增量</button>
<button onClick={decrementHandler}>减少增量</button>
</div>
);
}useEffectEvent的优势：
代码更清晰：不需要拆分状态，逻辑更集中
自动处理最新值：在useEffectEvent回调中总能访问到最新的状态
依赖项更简洁：useEffect的依赖数组保持简洁
使用useEffectEvent的注意事项
使用范围：useEffectEvent主要用在effects内部，不要在effects外部调用
适用场景：最适合处理那些既是状态值又是逻辑值的情况
纯逻辑值：如果值只用于逻辑计算，不驱动UI，应该使用useRef
实际应用场景
场景1：事件监听
function SearchBox() {
const [query, setQuery] = useState('');
const [results, setResults] = useState([]);
const handleSearch = useEffectEvent(() => {
if (query.trim()) {
searchAPI(query).then(setResults);
}
});
useEffect(() => {
const timer = setTimeout(handleSearch, 300);
return () => clearTimeout(timer);
}, [query]); // 只需要query作为依赖
}场景2：WebSocket连接
function ChatRoom() {
const [messages, setMessages] = useState([]);
const [user, setUser] = useState(null);
const handleMessage = useEffectEvent((newMessage) => {
if (user && newMessage.userId !== user.id) {
setMessages(prev => [...prev, newMessage]);
}
});
useEffect(() => {
const ws = new WebSocket('ws://localhost:8080');
ws.onmessage = (event) => {
handleMessage(JSON.parse(event.data));
};
return () => ws.close();
}, []); // 空依赖，不需要包含user
}总结
useEffectEvent是React为解决useEffect依赖问题提供的新工具。它让代码更清晰，减少了手动处理闭包陷阱的复杂度。
关键要点：
使用useEffectEvent包装那些需要在effect中使用但不应作为依赖的值
在useEffectEvent回调中总能访问到最新的状态
保持useEffect依赖数组的简洁性
虽然这个API还在实验阶段，但它代表了React在改善开发者体验方面的持续努力。掌握它能让你的React代码更加健壮和易维护。
本文内容仅供个人学习/研究/参考使用，不构成任何决策建议或专业指导。分享/转载时请标明原文来源，同时请勿将内容用于商业售卖、虚假宣传等非学习用途哦～感谢您的理解与支持！