useRef

useRef初始值为传入的参数，它的返回值是一个ref对象，这个对象使用.current属性就是该数据的最新值。返回的 ref 对象在组件的整个生命周期内保持不变。它的作用和类组件中this是一样的。

useRef的使用

使用useRef的一个最简单的情况就是在函数组件里面获取DOM对象的引用。

案例：组件挂载后输入框自动聚焦

import {useRef,useEffect} from 'react'

export default function App() {
  let inputel=useRef();
  useEffect(()=>{
    console.log(inputel);
    inputel.current.focus();
  })
  return (
    <div>
      <p>App组件</p> 
      <input type="text" ref={inputel}/> 
    </div>
  )
}

import {useRef} from 'react'

export default function App() {
  let test=useRef();
  let look=()=>{
    console.log(test.current);
  }
  return (
    <div>
      <p ref={test}>App组件</p> 
      <p ref={test}>test</p>
      <button onClick={look}>look</button>
    </div>
  )
}

当页面中多个相同的同名的ref，后者会覆盖前者，只会获取一个。

useRef获取组件

useRef可以直接获取类组件，不能使用这个直接获取函数组件，会得到undefined，需要配合forwardRef使用。

import React, { Component,useRef } from 'react'
class Home extends Component {
  render() {
    return (
      <div>Home</div>
    )
  }
}
export default function App() {
  let test=useRef();
  let look=()=>{
    console.log(test.current);
  }
  return (
    <div>
      <p>App组件</p> 
      <Home ref={test}></Home>
      <button onClick={look}>look</button>
    </div>
  )
}

import React, { useRef } from 'react'
function Home() {
  return (
    <div>Home</div>
  )
}
export default function App() {
  let test=useRef();
  let look=()=>{
    console.log(test.current,666666);
  }
  return (
    <div>
      <p>App组件</p> 
      <Home ref={test}></Home>
      <button onClick={look}>look</button>
    </div>
  )
}

import React, { useRef,forwardRef } from 'react'
const Home =  forwardRef((props,ref) => {
  return <div ref={ref}>Home</div>
})
export default function App() {
  let test=useRef();
  let look=()=>{
    console.log(test.current,666666);
  }
  return (
    <div>
      <p>App组件</p> 
      <Home ref={test}></Home>
      <button onClick={look}>look</button>
    </div>
  )
}