永年专业做网站中国营销策划第一人

---

前言

React 19版本发布了ref支持清理函数了，这样就可以达到useEffect一样的效果了。为啥需要清理函数呢，这是因为节约内存。 清理事件监听（避免内存泄漏）

一、refs 支持清理函数

这将使得在 ref 改变时执行清理操作变得更加容易。例如，你可以在 ref 改变时取消订阅事件：

看到这里有小伙伴可能很懵，说这啥意识？下面我就带你演示一个案例就懂了。

二、案例演示

我们就做一个类似于防抖的请求接口。看看useEffect和refs 支持清理函数 这个到底有啥区别。

1.useEffect写法

const App = () => {const [name, setName] = useState("");useEffect(() => {let timer = setTimeout(() => {fetch(`http://localhost:5173/?name=${name}`);}, 1000);return () => {clearTimeout(timer);};}, [name]);return (<div id="data"><div><h3>父组件</h3><inputvalue={name}// ref={setRef}onChange={(e) => setName(e.target.value)}/></div><hr /></div>);
};export default App;

不加清理函数就重复请求

加了就类似于防抖效果（类似哈）

2.React 19改进 的ref写法

其实两种效果都是一样的，只不过这种写法不需要额外的引入useEffect这个Hook，不需要写依赖项，直接传一个回调函数就行了。

const App = () => {const [name, setName] = useState("");// react 19版本可以直接传一个回调函数过来，node就是绑定ref的dom元素const setRef = (node: HTMLInputElement) => {if (node) {let timer = setTimeout(() => {fetch(`http://localhost:5173/?name=${name}`);}, 1000);return () => {clearTimeout(timer);};}};return (<div id="data"><div><h3>父组件</h3><inputvalue={name}// + setRefref={setRef}onChange={(e) => setName(e.target.value)}/></div><hr /></div>);
};export default App;

一样达到效果

---

总结

以上就是React 19版本的小改动，但现在还是以18为主，只是在18的基础上做了一些更新，这个清理函数具体有啥用呢，可以替换useEffect吗？这点确实还不足够，useEffect更能精确控制依赖性，所以以后使用还是看情况选择。