React Hooks - useRef和useImperativeHandle的使用方式

今天药忘吃喽~ 2023-09-27 09:53 18阅读 0赞

#### 文章目录 ####

*   *  useRef的解析
     *  useImperativeHandle

### useRef的解析 ###

**useRef返回一个ref对象，返回的ref对象在组件的整个生命周期保持不变**。

**最常用的ref是两种用法**:

> 用法一: 用来获取DOM(或者组件，但是需要是class组件)元素, 操作DOM;

import React, {
         memo, useRef } from 'react'
    
    const App = memo(() => {
        
      const inputRef = useRef()
    
      function inputDom() {
        
        inputRef.current.focus()
      }
    
      return (
        <div>
          <input type="text" ref={
        inputRef}/>
          <button onClick={
        inputDom}>获取焦点</button>
        </div>
      )
    })
    
    export default App

> 用法二: 保存一个数据，这个对象在整个生命周期中可以保存不变;

*  例如下面代码, 在我们修改counter时, App组件会重新渲染, 那么info对象也会重新在堆内存中开辟一个新的内存空间; 意味着我们每修改一次counter, 拿到是一个新的info对象

import React, {
         memo, useState, useRef } from 'react'
    
    const App = memo(() => {
        
      const [counter, setCounter] = useState(10)
    
      function increment() {
        
        setCounter(counter + 1)
      }
    
      // 定义一个对象
      const info = {
        }
    
      return (
        <div>
          <h2>当前计数: {
        counter}</h2>
          <button onClick={
        increment}>+1</button>
        </div>
      )
    })
    
    export default App

*  我们可以使用useRef, 因为useRef不管渲染多少次, 返回的都是同一个ref对象

import React, {
         memo, useState, useRef } from 'react'
    
    const App = memo(() => {
        
      const [counter, setCounter] = useState(10)
    
      function increment() {
        
        setCounter(counter + 1)
      }
    
      // 定义一个对象
      const infoRef = useRef()
    
      return (
        <div>
          <h2>{
        infoRef.current.name}-{
        infoRef.current.age}</h2>
          <h2>当前计数: {
        counter}</h2>
          <button onClick={
        increment}>+1</button>
        </div>
      )
    })
    
    export default App

**useRef和useCallback一起使用, 可以解决`闭包陷阱`的问题, 在上一篇文章中有对应的案例**

--------------------

### useImperativeHandle ###

**useImperativeHandle并不是特别好理解, 有点抽象，我们一点点来学习**。

**我们先来回顾一下ref和forwardRef结合使用**:

> 通过forwardRef可以将ref转发到子组件;
> 
> 子组件拿到父组件中创建的ref，绑定到自己的某一个元素中;
> 
> 父组件中就可以获取到子组件中绑定了ref的元素

import React, {
         memo, useRef,forwardRef } from 'react'
    
    const HelloWorld = memo(forwardRef((props, ref) => {
        
      return (
        <input type="text" ref={
        ref} />
      )
    }))
    
    const App = memo(() => {
        
      const inputRef = useRef()
    
      function getInputDom() {
        
        // 获取到子组件中的input元素
        console.log(inputRef.current)
        // 操作DOM
        inputRef.current.focus()
      }
    
      return (
        <div>
          <HelloWorld ref={
        inputRef}/>
          <button onClick={
        getInputDom}>子组件input获取焦点</button>
        </div>
      )
    })
    
    export default App

**forwardRef的做法本身没有什么问题，但是我们是将子组件的DOM直接暴露给了父组件**:

> 直接暴露给父组件带来的问题是某些情况的不可控;
> 
> 父组件可以拿到DOM后进行任意的操作;
> 
> 但是，事实上在上面的案例中，我们只是希望父组件可以操作的focus，其他并不希望它随意操作
> 
> 例如修改元素内容的操作`inputRef.current.value = "aaa"`等等, 我们希望可以限制它的操作;

**通过useImperativeHandle可以值暴露固定的操作(*对操作进行限制*)**:

> useImperativeHandle要求传入两个参数:
> 
>  *  参数一: 传入一个ref
>  *  参数二: 传入一个回调函数, 要求该回调函数返回一个对象, 该对象会绑定到传入的ref的current属性中
> 
> 通过useImperativeHandle的Hook，将传入的ref和useImperativeHandle第二个参数返回的对象绑定到了一起; 所以在父组件中，使用 inputRef.current时，实际上使用的是参数二返回的对象;
> 
> > 例如下面代码中, 在子组件通过useImperativeHandle暴露一个方法focus
> 
>     const HelloWorld = memo(forwardRef((props, ref) => {
>          
>       // 通过useImperativeHandle在子组件对父组件传入的ref进行处理
>       useImperativeHandle(ref, () => {
>          
>         return {
>          
>           focus() {
>          
>             console.log("focus调用")
>           }
>         }
>       })
>     
>       return (
>         <input type="text" ref={
>          ref} />
>       )
>     }))
> 
> > 那么在App父组件中本质上就是在调用参数二返回的对象
> 
>     const App = memo(() => {
>          
>       const inputRef = useRef()
>     
>       function getInputDom() {
>          
>         // 获取到的也是参数二返回值的那个对象
>         console.log(inputRef.current)
>         
>         // 本质上调用的是参数二返回的对象中的focus方法
>         inputRef.current.focus()
>       }
>     
>       return (
>         <div>
>           <HelloWorld ref={
>          inputRef}/>
>           <button onClick={
>          getInputDom}>子组件input获取焦点</button>
>         </div>
>       )
>     })

**但是我们并不是想像上面代码中那样简单的打印一句话, 而是想真正的获取到焦点**

> 那么我们就可以在子组件的内部, 在重新定义一个ref对象, 再将想要暴露的操作暴露出去即可
> 
> 例如下面代码中我们只暴露获取焦点的操作, 这样就会变得更安全, 更可控; 我们想要在外部使用什么功能完全由内部的子组件决定

import React, { memo, useRef,forwardRef, useImperativeHandle } from 'react'
    
    const HelloWorld = memo(forwardRef((props, ref) => {
      // 在子组件内部重新定义一个ref对象
      const inputRef = useRef()
    
      // 通过useImperativeHandle在子组件对父组件传入的ref进行处理
      useImperativeHandle(ref, () => {
        return {
          focus() {
            inputRef.current.focus()
          }
        }
      })
    
      return (
        // 将组件内部定义的ref对象绑定到表单中
        <input type="text" ref={inputRef} />
      )
    }))
    
    const App = memo(() => {
      const inputRef = useRef()
    
      function getInputDom() {
        console.log(inputRef.current)
        // 本质上调用的是参数二返回的对象
        inputRef.current.focus()
      }
    
      return (
        <div>
          <HelloWorld ref={inputRef}/>
          <button onClick={getInputDom}>子组件input获取焦点</button>
        </div>
      )
    })
    
    export default App