React HOOK：useRef

useRef

useRef是用来在组件不同渲染之间共用一些数据的，它的作用和我们在类组件里面为this赋值是一样的。

语法

import {useRef} from "react"
const refObject = useRef(initialValue)
//useRef接收initialValue作为初始值，它的返回值是一个ref对象，这个对象的.current属性就是该数据的最新值。使用useRef的一个最简单的情况就是在函数组件里面获取DOM对象的引用
 

 

案例:

import { useRef, useEffect } from 'react'
import ReactDOM from 'react-dom'
​
const AutoFocusInput = () => {
  const inputRef = useRef(null)
​
  useEffect(() => {
    // 组件挂载后自动聚焦
    inputRef.current.focus()
  }, [])
​
  return (
    <input ref={inputRef} type='text' />
  )
}
​
ReactDOM.render(<AutoFocusInput />, document.getElementById('root'))
//在上面代码中inputRef其实就是一个{current: input节点}对象，只不过它可以保证在组件每次渲染的时候拿到的都是同一个对象。