React【1】【ref常用法】
文章目录
- 前言
- 用途
- 1. 储存
- 2. 储存dom句柄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}/></>
}