useRef
當(dāng)想讓組件記住一些信息，又不想觸發(fā)新的渲染，可以使用ref：總是返回同一個(gè)對(duì)象。
1. state 和 refs 的比較
| refs（普通的 JavaScript 對(duì)象） |
state |
| 更改時(shí)不觸發(fā)重新渲染 |
更改時(shí)觸發(fā)重新渲染 |
| 可變的——修改/更新 （修改完立即生效
?? ） |
不可變——必須使用state的setting函數(shù)去修改state變量 React 狀態(tài)的限制（每個(gè)渲染的快照，不會(huì)同步更新） |
|
|
|
每次更新state，組件會(huì)重新渲染
import { useState } from 'react';
export default function Counter() {
const [count, setCount] = useState(0);
function handleClick() {
setCount(count + 1);
}
return (
<button onClick={handleClick}>
You clicked {count} times
</button>
);
}
?ref.current不要在渲染過程中讀取或?qū)懭?，組件不會(huì)隨著每次ref增量而重新渲染：
import { useRef } from 'react';
export default function Counter() {
let countRef = useRef(0);
function handleClick() {
// This doesn't re-render the component!
countRef.current = countRef.current + 1;
}
return (
<button onClick={handleClick}>
You clicked {countRef.current} times
</button>
);
}
2. 常見使用場(chǎng)景
A. 存儲(chǔ)timeout IDs
import { useRef } from 'react';
export default function Chat() {
let timeoutID = useRef(null);
function handleSend() {
timeoutID.current = setTimeout(() => {
alert('Sent!');
}, 3000);
}
function handleUndo() {
clearTimeout(timeoutID.current);
}
}
B. 存儲(chǔ)和操縱dom元素（避免更改由 React 管理的 DOM 節(jié)點(diǎn)）
-
基礎(chǔ)用法：
<div ref={counterRef} /> -
訪問其他組件的dom節(jié)點(diǎn)：文章來源：http://www.zghlxwxcb.cn/news/detail-517289.html
import { forwardRef, useRef } from 'react';
const MyInput = forwardRef((props, ref) => {
//（可選）限制公開的內(nèi)容，不讓Form組件的ref調(diào)用處理其他事件（如修改css）
const realInputRef = useRef(null);
useImperativeHandle(ref, () => ({
// Only expose focus and nothing else
focus() {
realInputRef.current.focus();
},
}));
return <input {...props} ref={ref} />;
});
export default function Form() {
const inputRef = useRef(null);
function handleClick() {
inputRef.current.focus();
}
return (
<>
<MyInput ref={inputRef} />
<button onClick={handleClick}>
Focus the input
</button>
</>
);
}
?C. 存儲(chǔ)其他對(duì)計(jì)算jsx非必要的對(duì)象文章來源地址http://www.zghlxwxcb.cn/news/detail-517289.html
到了這里，關(guān)于React hooks文檔筆記（四） useRef的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
![[React] useRef用法和特性](https://imgs.yssmx.com/Uploads/2024/02/428292-1.png)
