useRef

173 阅读1分钟
  • use使用方法和class里的使用方法是一样的。
  • useRef返回一个Ref对象,其curren被初始化未传入的参数。
  • 特点:返回的ref对象在组建的整个生命周期内保持不变。修改ref.current不会引发组件重新渲染。
  • 利用这些特征我们除了在可以将dom存储在current中以外,还可以将那些不涉及到组件更新以及在函数调用过程中不应该被重复初始化的数据存储在其中,就像类式组件中在实例对象上存储的数据一样。
import React,{useState,useCallback,useRef,useEffect} from 'react'

export default function AppuseRef() {
    const myRef=useRef();//得到ref对象
    const add=()=>{
        let usename=myRef.current.value;
        console.log(usename)
    }
  return (
    <div>
        <input type="text" ref={myRef}/>
        <button onClick={add}>add</button>
        {/* <h1>{myRef.current.value}</h1> */}
    </div>
  )
}