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

news2025/5/22 17:13:26

文章目录

前言
一、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>
        <input
          value={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>
        <input
          value={name}
          // + setRef
          ref={setRef}
          onChange={(e) => setName(e.target.value)}
        />
      </div>
      <hr />
    </div>
  );
};

export default App;