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 或带有酶和玩笑的功能组件内的函数?

使用 useRef 从 Reactjs 中的父级调用子函数

React 钩子 useRef() 如何在幕后工作?那个参考到底是啥?

React useState 由于 useRef 而没有更新

ZF_react hooks useEffect的实现 useRef useImperativeHandle的实现,react整体功能实现完毕