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 += 1
        console.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

通过createRef创建一个ref对象
给元素绑定ref属性值为创建的ref对象

通过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