react useRef()函数
Posted ajanuw
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了react useRef()函数相关的知识,希望对你有一定的参考价值。
“ref”对象是一个通用容器,其current属性是可变的
保存dom
function Test() {
const t = useRef(null);
useEffect(() => {
l(t.current); // div
});
return (
<div ref={t}> ... </div>
);
}
保存事件程序
function Test() {
const t = useRef(null);
function handleClick() {
t.current = setTimeout(() => l(1), 2000);
}
function handleClear() {
clearTimeout(t.current);
}
return (
<>
<button onClick={handleClick}>start</button>
<button onClick={handleClear}>clear</button>
</>
);
}
存储以前的值
function Test() {
const t = useRef(null);
const [name, setName] = useState("ajanuw");
useEffect(() => {
t.current = name;
});
const prevName = t.current;
return (
<div>
<input value={name} onChange={e => setName(e.target.value)} />
<h2>{name}</h2>
<p>{prevName}</p>
</div>
);
}
以上是关于react useRef()函数的主要内容,如果未能解决你的问题,请参考以下文章
React - UseState,UseRef..In Trouble
模拟 React useRef 或带有酶和玩笑的功能组件内的函数?
React 钩子 useRef() 如何在幕后工作?那个参考到底是啥?
React useState 由于 useRef 而没有更新
ZF_react hooks useEffect的实现 useRef useImperativeHandle的实现,react整体功能实现完毕