React 之 useRef_react useref

一、概念

useRef，他的作用是“勾住”某些组件挂载完成或重新渲染完成后才拥有的某些对象，并返回该对象的引用。该引用在组件整个生命周期中都固定不变，该引用并不会随着组件重新渲染而失效。返回一个可变的 ref 对象，该对象只有个 current 属性，初始值为传入的参数( initialValue )。返回的 ref 对象在组件的整个生命周期内保持不变。当更新 current 值时并不会 re-render ，这是与 useState 不同的地方。更新 useRef 是 side effect (副作用)，所以一般写在 useEffect 或 event handler 里。useRef 类似于类组件的 this

const refContainer = useRef(initialValue);

二、useRef是来解决什么问题的

1、JSX组件转换后对应的真实DOM对象。如何获取input的真实dom

useRef只适合“勾住”小写开头的类似原生标签的组件。如果是自定义的react组件(自定义的组件必须大写字母开头)，那么是无法使用useRef（当然也有一些技巧后面会讲）的。比如，我们如何获取这个 <input/> 真实DOM呢。那么就可以使用useRef

初始化input聚焦

import React,{useEffect,useRef} from 'react'
 
function Component() {
  //先定义一个inputRef引用变量，用于“勾住”挂载网页后的输入框