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, 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, 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, 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
原文地址:https://lanan.blog.csdn.net
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。