hook之useRef

这个Hook的作用是获取我们的元素节点的，就跟我们以前学习Vue中的ref相似，在元素节点中ref绑定，然后this.$refs对象中就可以获取我们绑定ref的元素。

在React中，我们通过useRef()来实现

用法

let myref=useRef(null)//null为我们传入的初始值

useRef()返回的结果是一个对象，里面有一个属性current其值为我们传入的初始值

我们可以通过ref将这个对象绑定到DOM元素节点上，如：

<input  type="text" ref={myref} />

绑定过后，myref.current的值就变为了这个input元素节点对象

因此我们可以利用它，来简单实现一个input标签自动聚焦的功能。

代码：

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

export default function Box1() {

    let myref=useRef(null)
    useEffect(()=>{
        //组件挂载后运行
        myref.current.focus()
    },[])
    
  return (
    <div>
        <input type="text" ref={myref} />
    </div>
  )
}

其它用法

useRef这个hooks函数，除了传统的用法获取DOM节点之外，它还可以“跨渲染周期”保存数据。

在一个组件中有什么东西可以跨渲染周期，也就是在组件被多次渲染之后依旧不变的属性？第一个想到的应该是state。没错，一个组件的state可以在多次渲染之后依旧不变。但是，state的问题在于一旦修改了它就会造成组件的重新渲染。

那么这个时候就可以使用useRef来跨越渲染周期存储数据，而且对它修改也不会引起组件渲染。

如：

let myef2=useRef(null)

//这时myref2这个对象的current用来存储数据

如：myref2.current=666