文章目錄
- 前言
- 一、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更能精確控制依賴性,所以以后使用還是看情況選擇。