useRef在每次执行时返回的是同一个引用（返回的ref对象在组件的整个生命周期内保持不变）
在函数组件中可以使用useRef和createRef
但useRef性能比createRef好，快
在类组件中，createRef是在初始化constructor时被赋值的（执行一次）

类组件中的createRef

23 Refs的应用场景与选用思考
25 Refs转发机制与在高阶组件中的使用

函数组件useRef

import { createRef, forwardRef, useRef } from 'react'
const Foo = forwardRef((params, inputRef) => {// 第一个参数写params 不要用null占位return (<><input type="text" ref={inputRef} /></>)
})
const App = () => {const inputRef = useRef()// 效果相同，性能有差异// const inputRef = createRef()const focus = () => {inputRef.current.focus()}return (<><button onClick={focus}>聚焦</button><Foo ref={inputRef} /></>)
}
export default App

比较createRef和useRef

window.arr1 = []
window.arr2 = []const App = () => {const [num, setNum] = useState(0)const useRef1 = useRef()const createRef1 = createRef()window.arr1.push(useRef1) // 每项指向相同的引用window.arr2.push(createRef1) // 每项指向不同的引用return (<><span>{num}</span><br /><button onClick={() => setNum(num + 1)}>add</button></>)
}

回调方式设置ref

类组件

const App = () => {let refSpan;return (<><span ref={dom => {refSpan = dom}}>{1}</span><br /><button onClick={() => console.log('dom', refSpan)}>add</button></>)
}

函数组件

class App extends Component {refSpan;render() {return (<><span ref={dom => {this.refSpan = dom}}>{1}</span><br /><button onClick={() => console.log('dom', this.refSpan)}>add</button></>)}
}

useImperativeHandle的使用与实现

perative 英[ɪmˈperətɪv]
美[ɪmˈperətɪv]
adj. 重要紧急的; 迫切的; 急需处理的; 表示权威的; 表示命令的; 祈使的;
n. 重要紧急的事; 必要的事; 祈使语气; 祈使语气动词;

import { createRef, forwardRef, useRef } from 'react'
// 实现useImperativeHandle
const useImperativeHandle = (ref, cb) => {ref.current = cb()
}
const Foo = forwardRef((params, ref) => {// 第一个参数写params 不要用null占位const inputRef = useRef()const focus = () => {inputRef.current.focus()}useImperativeHandle(ref, () => {return {focus}})return (<><input type="text" ref={inputRef} /></>)
})
const App = () => {const inputRef = useRef()// 效果相同，性能有差异// const inputRef = createRef()const focus = () => {// 收拢父组件的权限,只暴露focus方法console.log('inputRef', inputRef)inputRef.current.focus()}return (<><button onClick={focus}>聚焦</button><Foo ref={inputRef} /></>)
}
export default App

6 useRef、useImperativeHandle相关推荐

React Hooks的使用（三）——useRef、useImperativeHandle、useLayoutEffect解析、自定义Hook
一.useRef useRef返回一个ref对象,返回的ref对象再组件的整个生命周期保持不变. 最常用的ref是两种用法: 用法一:引入DOM(或者组件,但是需要是class组件)元素: 案例一:引 ...
前端面试题【131道】
前端面试题 1.vue2和vue3的主要区别 3.Apply/call/bind的原理是什么? 4.说说你对原型和原型链的理解? 5.说说你对ES6中Generator的理解 6.说说你对Event ...
Hooks的基本介绍
1 什么是Hooks Hook 是 React 16.8 的新增特性, 它可以让函数式组件拥有类组件特性[如:保存自己的状态,有自己的生命周期方法] 基础的Hook:useState.useEffec ...
React 生命周期、Hooks
React React 生命周期 Hooks Hook 的特点 Effect Hook 自定义 hooks React 生命周期 react 生命周期是组件实例从创建运行到销毁的一系列过程 compo ...
hook修改信息_React系列二十一 Hook（二）高级使用
一. Hook高级使用 1.1. useReducer 很多人看到useReducer的第一反应应该是redux的某个替代品,其实并不是. useReducer仅仅是useState的一种替代方案: ...
react 显示当前时间_React 灵魂 23 问，你能答对几个？
1.setState 是异步还是同步? 合成事件中是异步钩子函数中的是异步原生事件中是同步 setTimeout中是同步相关链接: 你真的理解setState吗? 2.聊聊 react@16.4 ...
【react】react18的学习（三）--hooks组件
上一篇:[react]react18的学习(二)-三种组件 1.useState:使函数组件可以使用并修改 state import { useState } from 'react' const [ ...
React学习笔记（八）--- HooK
一.简介在之前的学习中,我们了解到只有类组件中才能使用 state,函数组件是无法使用的.但Hook的出现,改变这种情况,Hook是React 16.8 版本的新增特性,可以让我们在函数组件中使 ...
antd Upload 自定义上传
需求由于使用antd 上传图片,在某些情况下,例如token 失效,导致上传图片错误,但是antd 组件始终会走onChange 事件导致上传路径为空情况解决办法使用自定义上传 // 自定义上 ...

6 useRef、useImperativeHandle

类组件中的createRef

函数组件useRef

比较createRef和useRef

回调方式设置ref

类组件

函数组件

useImperativeHandle的使用与实现

6 useRef、useImperativeHandle相关推荐

最新文章

热门文章