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}/></>
}