Vue 和 React 使用ref

ref 用于访问 DOM 元素或子组件实例

Vue2:

<template><div><input ref="inp" /></div>
</template><script>
export default {mounted() {this.$refs.inp.focus()}
}
</script>

Vue3 组合式API中使用ref 

<template><div><input ref="inp" /></div>
</template><script>
import { ref, onMounted } from 'vue';export default {setup() {const inp = ref(null)onMounted(() => {inp.value.focus()})return {inp}}
}
</script>

<template><div><input ref="inp" /></div>
</template><script setup>
import { ref, onMounted } from 'vue';const inp = ref(null)onMounted(() => {inp.value.focus()
})</script>

        在 Vue 中，ref 是一个响应式对象，修改 ref 的值会触发组件的重新渲染。因为 Vue 的 ref 是基于其响应式系统实现的，任何对 ref 的修改都会被 Vue 检测到，并触发组件的更新。

React 函数组件通过useRef Hook 来实现：

useRef 不仅可以用于访问 DOM 元素，还可以存储任何可变值

import { useEffect, useRef } from "react"const Hanshi = () => {const inp = useRef(null)useEffect(()=>{inp.current.focus()},[])return <><div><h3>函数组件</h3><input type="text" ref={inp}/></div></>}export default Hanshi

useRef(null) 创建了一个 ref 对象，并将其初始值设置为 null

将 inp 绑定到 <input> 的 ref 属性上，这样 inp.current 就会指向该 DOM 元素

在 useEffect 中，通过 inp.current 访问 DOM 元素并调用 focus() 方法

存储任何可变值：与 useState 不同，修改 useRef 的值不会触发组件的重新渲染

import { useEffect, useRef } from "react"const Hanshi = () => {const inp = useRef()const num = useRef(0)useEffect(()=>{inp.current.focus()num.current += 1console.log(`组件渲染了 ${num.current} 次`)},[])return <><div><h3>函数组件</h3><input type="text" ref={inp}/></div></>}export default Hanshi

 

函数组件中转发 ref(forwardRef）: forwardRef 允许父组件访问子组件中的 DOM 元素或组件实例

使用 forwardRef 将 ref 从父组件传递到子组件

父组件通过 inpt 访问子组件中的 <input> 元素

useImperativeHandle 自定义子组件暴露给父组件的 ref 值

useImperativeHandle 允许子组件自定义暴露给父组件的 ref 值

父组件可以通过 inpt.current 调用子组件暴露的方法（如 focus 和 getValue）

React 类组件 createRef

1. 通过createRef创建一个ref对象
2. 给元素绑定ref属性值  为创建的ref对象
3. 通过ref对象的current获取元素，再获取它的值

import { Component,createRef } from "react";export default class Detail extends Component{inp = createRef()getInp(){console.log(this.inp.current.value)}componentDidMount(){this.inp.current.focus()}render() {return <div><h3>类组件</h3><input type="text" ref={this.inp}/><button onClick={this.getInp.bind(this)}>获取值按钮</button></div>}}

类子组件

父组件通过 ref 访问子组件的实例，并调用子组件的方法（如 focus）

这种方式仅适用于类组件，函数组件没有实例

函数式子组件 forwardRef