React Hooks中 useRef和useImperativeHandle的使用方式

更新时间：2023年10月18日 15:28:51 作者：学全栈的灌汤包

这篇文章主要介绍了React Hooks中 useRef和useImperativeHandle的使用方式,文中说明了useRef和useCallback一起使用, 可以解决闭包陷阱的问题,本文结合实例代码介绍的非常详细,需要的朋友可以参考下

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

到此这篇关于React Hooks - useRef和useImperativeHandle的使用方式的文章就介绍到这了,更多相关React useRef和useImperativeHandle使用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

react项目实践之webpack-dev-serve
这篇文章主要介绍了react项目实践之webpack-dev-serve,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-09-09
在React中编写样式的六种方式
在React中,编写样式主要有以下几种方式,内联样式,外部样式表,CSS Modules,Styled Components,Emotion和Radium这六种样式,下面我将针对上面提到的6种方式给出详细的代码示例,需要的朋友可以参考下
2024-01-01
React深入浅出分析Hooks源码
在react类组件（class）写法中，有setState和生命周期对状态进行管理，但是在函数组件中不存在这些，故引入hooks（版本：>=16.8），使开发者在非class的情况下使用更多react特性
2022-11-11
React 组件性能最佳优化实践分享
这篇文章主要介绍了React组件性能最佳优化实践分享，React组件性能优化的核心是减少渲染真实DOM节点的频率，减少Virtual DOM比对的频率，更多相关内容需要的朋友可以参考一下
2022-09-09
React.js中组件重渲染性能问题及优化过程
这篇文章主要介绍了React.js中组件重渲染性能问题及优化过程,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2025-05-05
react16+antd4 RangePicker组件实现时间禁选示例
这篇文章主要为大家介绍了react16+antd4 RangePicker 时间禁选示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-05-05
React中redux的使用详解
Redux 是一个状态管理库,它可以帮助你管理应用程序中的所有状态,Redux的核心概念之一是Store,它表示整个应用程序的状态,这篇文章给大家介绍React中redux的使用,感兴趣的朋友一起看看吧
2023-12-12
React Native实现简单的登录功能(推荐)
这篇文章主要介绍了React Native实现登录功能的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下
2016-09-09
React-Native中一些常用组件的用法详解(二)
这篇文章主要跟大家介绍了关于React-Native中一些常用组件的用法的相关资料，其中详细介绍了关于ScrollView组件、ListView组件、Navigator组件、TableBarIOS组件以及网络请求等相关内容，需要的朋友可以参考借鉴，下面来一起看看吧。
2017-06-06
一文搞懂 React 19 新特性
React 19 引入多项重要更新,主要聚焦于异步状态管理、性能优化和开发体验提升,这些改进显著减少了状态管理样板代码,提升了应用性能和开发效率,感兴趣的可以了解一下
2026-05-05

React Hooks中 useRef和useImperativeHandle的使用方式

目录

useRef的解析

useImperativeHandle

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具