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

文章目录


前言

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

一、refs 支持清理函数

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

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

二、案例演示

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

1.useEffect写法

c 复制代码
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,不需要写依赖项,直接传一个回调函数就行了。

c 复制代码
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更能精确控制依赖性,所以以后使用还是看情况选择。

相关推荐
你怎么知道我是队长2 分钟前
python---eval函数
开发语言·javascript·python
溟洵5 分钟前
Qt 窗口 工具栏QToolBar、状态栏StatusBar
开发语言·前端·数据库·c++·后端·qt
用户2519162427119 分钟前
Canvas之图像合成
前端·javascript·canvas
每天开心10 分钟前
噜噜旅游App(4)——构建旅游智能客服模块,实现AI聊天
前端·微信小程序·前端框架
超凌11 分钟前
el-input-number出现的点击+-按钮频现不生效
前端
NicolasCage11 分钟前
Icon图标库推荐
vue.js·react.js·icon
三小河11 分钟前
contentEditable 实现可编辑区域
前端
RaidenLiu14 分钟前
Flutter Shader预热技术解析与实践指南
flutter·前端框架
一道雷19 分钟前
🧩 Vue Router嵌套路由新范式:无需嵌套 RouterView 的布局实践
前端·vue.js
Mintopia24 分钟前
🎯 光与面的命运交锋:Möller-Trumbore 线段三角形相交算法全解析
前端·javascript·计算机图形学