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;

一樣達到效果
在這里插入圖片描述


總結

以上就是React 19版本的小改動,但現在還是以18為主,只是在18的基礎上做了一些更新,這個清理函數具體有啥用呢,可以替換useEffect嗎?這點確實還不足夠,useEffect更能精確控制依賴性,所以以后使用還是看情況選擇。

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/bicheng/81521.shtml
繁體地址,請注明出處:http://hk.pswp.cn/bicheng/81521.shtml
英文地址,請注明出處:http://en.pswp.cn/bicheng/81521.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

城市內澇監測預警系統守護城市安全

一、系統背景 城市內澇是指由于強降水或連續性降水超過城市排水能力&#xff0c;導致城市內產生積水災害的現象。隨著氣候變化和城市化進程的加快&#xff0c;城市內澇現象愈發頻繁和嚴重。傳統的城市排水系統已難以滿足當前的城市排水需求&#xff0c;特別是在暴雨等極端天氣條…

Flink 作業提交流程

Apache Flink 的 作業提交流程&#xff08;Job Submission Process&#xff09; 是指從用戶編寫完 Flink 應用程序&#xff0c;到最終在 Flink 集群上運行并執行任務的整個過程。它涉及多個組件之間的交互&#xff0c;包括客戶端、JobManager、TaskManager 和 ResourceManager。…

ctr查看鏡像

# 拉取鏡像到 k8s.io 命名空間 sudo nerdctl --namespace k8s.io pull nginx:1.23.4 # 驗證鏡像是否已下載 sudo nerdctl --namespace k8s.io images 下載鏡像到k8s.io名稱空間下 nerdctl --namespace k8s.io pull zookeeper:3.6.2 sudo ctr image pull --namespace k8s.io …

中科院自動化研究所通用空中任務無人機!基于大模型的通用任務執行與自主飛行

作者&#xff1a; Ji Zhao and Xiao Lin 單位&#xff1a;中科院自動化研究所 論文標題&#xff1a;General-Purpose Aerial Intelligent Agents Empowered by Large Language Models 論文鏈接&#xff1a;https://arxiv.org/pdf/2503.08302 主要貢獻 硬件-軟件協同設計框…

數據結構 -- 樹形查找(三)紅黑樹

紅黑樹 為什么要發明紅黑樹 平衡二叉樹AVL&#xff1a;插入/刪除很容易破壞平衡性&#xff0c;需要頻繁調整樹的形態。如&#xff1a;插入操作導致不平衡&#xff0c;則需要先計算平衡因子&#xff0c;找到最小不平衡子樹&#xff08;時間開銷大&#xff09;&#xff0c;在進行…

容器化-k8s-使用和部署

一、K8s 使用 1、基本概念 集群: 由 master 節點和多個 slaver 節點組成,是 K8s 的運行基礎。節點: 可以是物理機或虛擬機,是 K8s 集群的工作單元,運行容器化應用。Pod: K8s 中最小的部署單元,一個 Pod 可以包含一個或多個緊密相關的容器,這些容器共享網絡和存儲資源。…

力扣-283-移動零

1.題目描述 2.題目鏈接 283. 移動零 - 力扣&#xff08;LeetCode&#xff09; 3.題目代碼 class Solution {public void moveZeroes(int[] nums) {int dest-1;int cur0;while(cur<nums.length){if(nums[cur]0){cur;}else if(nums[cur]!0){swap(nums,cur,dest1);cur;dest…

前端開發筆記與實踐

一、Vue 開發規范與響應式機制 1. 組件命名規范 自定義組件使用大駝峰命名法&#xff08;如 MyComponent&#xff09;&#xff0c;符合 Vue 官方推薦&#xff0c;便于與原生 HTML 元素區分。 2. Proxy vs defineProperty 特性Proxy&#xff08;Vue3&#xff09;Object.defi…

如何給PSCAD添加庫文件

1、點擊Options 2、選擇藍色的選項 3、查看Intel(R) Visual Fortran Compiler XE 的版本 4、打開原文件的Library 5、打開 6、點擊這個文件的右鍵 7、然后選擇第一項project setting 9、先把第8步中link里面原有的路徑刪除&#xff0c;再點browes[A1] &#xff0c;然后選擇 [A…

milvus+flask山寨《從零構建向量數據庫》第7章case2

繼續流水賬完這本書&#xff0c;這個案例是打造文字形式的個人知識庫雛形。 create_context_db: # Milvus Setup Arguments COLLECTION_NAME text_content_search DIMENSION 2048 MILVUS_HOST "localhost" MILVUS_PORT "19530"# Inference Arguments…

【第一篇】 創建SpringBoot工程的四種方式

簡介&#xff1a; 通過此篇博客你可以使用任何方式進行創建 SpringBoot 項目&#xff0c;并且在文章的最后附上答疑解惑一節&#xff0c;為你排除在使用過程中發生的常見問題。文章內容若存在錯誤或需改進的地方&#xff0c;歡迎大家指正&#xff01;若對操作有任何疑問歡迎留言…

GPT( Generative Pre-trained Transformer )模型:基于Transformer

GPT是由openAI開發的一款基于Transformer架構的預訓練語言模型&#xff0c;擁有強大的生成能力和多任務處理能力&#xff0c;推動了自然語言處理&#xff08;NLP&#xff09;的快速發展。 一 GPT發展歷程 1.1 GPT-1&#xff08;2018年&#xff09; 是首個基于Transformer架構…

網絡檢測工具InternetTest v8.9.1.2504 單文件版,支持一鍵查詢IP/DNS、WIFI密碼信息

—————【下 載 地 址】——————— 【?本章下載一】&#xff1a;https://drive.uc.cn/s/295e068b79314 【?本章下載二】&#xff1a;https://pan.xunlei.com/s/VOQDXguH0DYPxrql5y2zlkhTA1?pwdg2nx# 【百款黑科技】&#xff1a;https://ucnygalh6wle.feishu.cn/wiki/…

CSS- 4.1 浮動(Float)

本系列可作為前端學習系列的筆記&#xff0c;代碼的運行環境是在HBuilder中&#xff0c;小編會將代碼復制下來&#xff0c;大家復制下來就可以練習了&#xff0c;方便大家學習。 HTML系列文章 已經收錄在前端專欄&#xff0c;有需要的寶寶們可以點擊前端專欄查看&#xff01; 點…

配置WebStorm鍵盤快捷鍵

目錄 配置快捷鍵添加鍵盤快捷鍵添加鼠標快捷鍵添加縮寫重置為默認快捷鍵 禁用雙快捷鍵用戶快捷鍵的保存位置與操作系統沖突 配置快捷鍵 WebStorm包含預定義的快捷鍵&#xff0c;同時允許自定義快捷鍵。要查看快捷鍵配置&#xff0c;請打開“設置”對話框&#xff0c;然后選擇K…

Java 21 + Spring Boot 3.5:AI驅動的高性能框架實戰

簡介 在微服務架構日益普及的今天,如何構建一個既高性能又具備AI驅動能力的后端系統成為開發者關注的焦點。本篇文章將深入探討Java 21與Spring Boot 3.5的結合,展示如何通過Vector API和JIT優化實現單線程性能提升30%,并利用飛算JavaAI生成智能重試機制和超時控制代碼,解…

Matrix-Game:鍵鼠實時控制、實時生成的游戲生成模型(論文代碼詳細解讀)

1.簡介 本文介紹了一種名為Matrix-Game的交互式世界基礎模型&#xff0c;專門用于可控的游戲世界生成。 Matrix-Game通過一個兩階段的訓練流程來實現&#xff1a;首先進行大規模無標簽預訓練以理解環境&#xff0c;然后進行動作標記訓練以生成交互式視頻。為此&#xff0c;研…

AI生成信息準確性,Ask-Refine提問策略,Agent最少的工具箱是什么樣的?

關于AI生成信息準確性的探討 在社群聊天記錄中&#xff0c;用戶提出在使用多種AI工具搜索培生出版企業上市信息時&#xff0c;遇到80%信息錯誤的問題&#xff0c;質疑AI為何無法勝任簡單的網絡信息爬取任務&#xff0c;并表達了對AI實用性的期望。 我抽空對此做出解答&#xff…

Linux系統中部署java服務(docker)

1、不使用docker ? 1. 檢查并安裝 Java 環境 檢查 Java 是否已安裝&#xff1a; java -version? 2. 上傳 Java 項目 JAR 文件 可以創建一個server文件夾&#xff0c;然后上傳目錄 查看當前目錄 然后創建目錄上傳jar包 ? 3. 啟動 Java 服務 java -jar hywl-server.jar…

遨游科普:三防平板是什么?有什么功能?

清晨的露珠還掛在帳篷邊緣&#xff0c;背包里的三防平板卻已開機導航&#xff1b;工地的塵土飛揚中&#xff0c;工程師正通過它查看施工圖紙&#xff1b;暴雨傾盆的救援現場&#xff0c;應急隊員用它實時回傳災情數據……這些看似科幻的場景&#xff0c;正因三防平板的普及成為…