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