useRef创建的对象存在react整个生命周期当中

最新推荐文章于 2025-05-15 17:33:18 发布

原创最新推荐文章于 2025-05-15 17:33:18 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react.js

Hooks之useRef 专栏收录该内容

1 篇文章

订阅专栏

本文探讨了React中的useRef和createRef两种创建引用的方法，强调了它们的生命周期、用法和在组件内的不同应用场景。通过实例演示了如何使用它们来保持状态并更新UI。

import React,{useRef, useState} from 'react'

/**
 * 
 * @returns useRef创建的对象存在于整个生命周期中，每次返回的都是都一个对象
 */
export default function Test() {
  const [count,setCount] = useState(0);
  const uRef = useRef(0);
  const reactRef = React.createRef(0);
  if(!uRef.current){
    uRef.current = count;
  }
  if(!reactRef.current){
    reactRef.current = count;
  }
  console.log(uRef,reactRef);
  return (
    <div>
      <p>createRef:{reactRef?.current}</p>
      <p>useRef:{uRef?.current}</p>
      <strong>createRef</strong>
      <strong>useRef</strong>
      <button onClick={()=>{setCount(prev=>++prev)}}>count++</button>
    </div>
  )
}