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

文章目录

• 前言
• [一、refs 支持清理函数](#一、refs 支持清理函数)
• 二、案例演示
• • 1.useEffect写法
  • [2.React 19改进 的ref写法](#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;

一样达到效果

---

总结

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