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

相关推荐
qq_411671987 分钟前
vue3 的模板引用ref和$parent
前端·javascript·vue.js
X_StarX15 分钟前
【Unity笔记01】基于单例模式的简单UI框架
笔记·ui·unity·单例模式·游戏引擎·游戏开发·大学生
清幽竹客1 小时前
vue-37(模拟依赖项进行隔离测试)
前端·vue.js
vvilkim1 小时前
Nuxt.js 页面与布局系统深度解析:构建高效 Vue 应用的关键
前端·javascript·vue.js
滿1 小时前
Vue3 父子组件表单滚动到校验错误的位置实现方法
前端·javascript·vue.js
专注VB编程开发20年1 小时前
javascript的类,ES6模块写法在VSCODE中智能提示
开发语言·javascript·vscode
智者知已应修善业2 小时前
【51单片机用数码管显示流水灯的种类是按钮控制数码管加一和流水灯】2022-6-14
c语言·经验分享·笔记·单片机·嵌入式硬件·51单片机
夏梦春蝉2 小时前
ES6从入门到精通:模块化
前端·ecmascript·es6
拓端研究室3 小时前
视频讲解:门槛效应模型Threshold Effect分析数字金融指数与消费结构数据
前端·算法
工一木子4 小时前
URL时间戳参数深度解析:缓存破坏与前端优化的前世今生
前端·缓存