React【1】【ref常用法】
前言
react组件每次调用setState的时候都会重新执行函数组件或者class组件
用途
1. 储存
每次调用setState时，组件函数都会重新执行。下面这种情况点击提交后，再点击取消，会发现定时器trimId1仍然执行了。这是因为trimId1被重新赋值了。
function App() {
const [msg, setMsg] = useState("未提交");
let trimId1 = 0;
const trimId2 = useRef(0);
console.log("更新重新执行函数");
const onAsyncSend = () => {
trimId1 = setTimeout(() => {
alert("发送1");
}, 3000);
trimId2.current = setTimeout(() => {
alert("发送2");
}, 3000);
setMsg("等待提交");
};
const onCancel = () => {
clearTimeout(trimId1);
clearTimeout(trimId2.current);
};
return (
<>
<div>
<button onClick={onAsyncSend}>提交</button>
<button onClick={onCancel}>取消</button>
<p>{msg}</p>
</div>
</>
);
}
2. 储存dom句柄ref
import {useRef} from "react"
function com(){
const refDom = useRef(0);
return <><input ref={refDom}/></>
}
原文地址：https://blog.csdn.net/qq_32019935/article/details/142387066
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！