:::info useRef返回一个ref对象，返回的ref对象让组件的整个生命周期保持不变。
作用：ref是react官方给我们预留的访问DOM元素或者组件实例的句柄。方便我们对DOM元素或者组件实例进行访问，对dom元素进行一些操作。
最常用的ref的两种用法：

• 用法1：引入实际的DOM元素(或者组件，但是需要是class组件)。
• 用法2：保存一个数据，这个对象在整个生命周期中可以保存不变。 :::

  1、useRef的具体使用（不传递参数）

  ```javascript import React, { Component, useRef } from ‘react’

// 定义类子组件 class Son1 extends Component { render() { return (

// 定义函数子组件 function Son2() { return (

export default function RefHookDemo() { // 绑定普通的dom元素 const h2Ref = useRef() // 绑定input输入框 const inputRef = useRef()

// 绑定子组件 不能使用ref来绑定函数式组件 const son1Ref = useRef() const son2Ref = useRef()

// 定义函数 function btnClick() { // 在这里可以操作dom 改变html里面的数据 h2Ref.current.innerHTML = ‘测试数据’ // 使输入框进行聚焦 inputRef.current.focus()

// 获取子组件
console.log(son1Ref) // 可以绑定类组件 类组件才有实例进行访问
console.log(son2Ref) // 函数式组件 不能直接使用ref进行绑定 控制台直接报错

}

return (

:::info
总结： useRef代替了原生获取dom元素的功能。不传递参数的时候，直接帮助我们绑定DOM元素。还可以使用ref来绑定子组件，但是访问值的时候需要加上.current属性来得到元素。使用ref绑定子组件的时候，子组件只能是类组件，不能是函数式组件。类组件才有实例进行访问。<br />原理(个人理解)：就是使用useRef提供的功能，创建一个标识符，将这个标识符与实际的DOM元素或者组件进行绑定，在后面就可以通过标识符的名称来访问对应绑定的组件。
:::
<a name="Wc72x"></a>
# 2、直接绑定相应的数据（传递参数）
> 实现上一次数据的记录和本次修改后数据的展示
```javascript
import React, { useState, useRef, useEffect } from 'react'
export default function RefHookDemo2() {
  // 定义一个状态数据 并且返回数据和修改数据的行为(action)
  const [count, setCount] = useState(200)
  // useRef传入其它的值 函数返回的是包裹了这个数据的对象 在整个生命周期函数中 只会执行一次 
  const numberRef = useRef(count)
  // 使用useEffect useEffect函数依赖变量count 当变量count发生变化时，
  // useEffect中的回调函数就会执行，会修改number.current中的值。
  useEffect(() => {
    numberRef.current = count
  }, [count])
  // 可以获取这个对象
  function btnClick() {
    //  修改数据
    setCount(count + 10)
  }
  return (
    <div>
      <p>useRef引用其它数据</p>
      <h3>useRef的数据-- useState上一次的数据--{numberRef.current}</h3>
      <h3>useState最新的数据--{ count }</h3>
      <button onClick={ btnClick }>点击测试</button>
    </div>
  )
}

3、代码案例

:::info forwardRef的具体使用：

• 通过forward可以将ref转发到子组件。
• 子组件拿到父组件中创建的ref，绑定到子组件内部的某一个元素中。 ::: ```javascript import React, { useRef, forwardRef } from ‘react’;

// ref可以传递到子组件的内部 在子组件的内部进行使用 在这里需要使用forwardRef函数进行包裹，否则无法对父组件传递的ref进行转发 在自己的内部子组件中进行使用

// 子组件 const ChildInput = forwardRef((props, ref) => { return })

// 父组件 export default function ForwardRefDemo() { const inputRef = useRef();

return (