React 19版本refs也支持清理函数了。

文章目录

前言
一、refs 支持清理函数
二、案例演示
- 1.useEffect写法
- 2.React 19改进的ref写法
总结

前言

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;