快捷導(dǎo)航

Vue 和 React 使用ref的示例詳解

更新時(shí)間：2025年04月07日 09:56:30 作者：lryh_

在 Vue 中,ref 是一個(gè)響應(yīng)式對(duì)象,修改 ref 的值會(huì)觸發(fā)組件的重新渲染,因?yàn)?nbsp;Vue 的 ref 是基于其響應(yīng)式系統(tǒng)實(shí)現(xiàn)的,任何對(duì) ref 的修改都會(huì)被 Vue 檢測(cè)到,并觸發(fā)組件的更新,本文給大家介紹Vue 和 React 使用ref的示例,感興趣的朋友一起看看吧

ref 用于訪問(wèn) DOM 元素或子組件實(shí)例

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>

在 Vue 中，ref 是一個(gè)響應(yīng)式對(duì)象，修改 ref 的值會(huì)觸發(fā)組件的重新渲染。因?yàn)?Vue 的 ref 是基于其響應(yīng)式系統(tǒng)實(shí)現(xiàn)的，任何對(duì) ref 的修改都會(huì)被 Vue 檢測(cè)到，并觸發(fā)組件的更新。

React 函數(shù)組件通過(guò)useRef Hook 來(lái)實(shí)現(xiàn)：

useRef 不僅可以用于訪問(wèn) DOM 元素，還可以存儲(chǔ)任何可變值

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

useRef(null) 創(chuàng)建了一個(gè) ref 對(duì)象，并將其初始值設(shè)置為 null

將 inp 綁定到 <input> 的 ref 屬性上，這樣 inp.current 就會(huì)指向該 DOM 元素

在 useEffect 中，通過(guò) inp.current 訪問(wèn) DOM 元素并調(diào)用 focus() 方法

存儲(chǔ)任何可變值：與 useState 不同，修改 useRef 的值不會(huì)觸發(fā)組件的重新渲染

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>函數(shù)組件</h3>
            <input type="text" ref={inp}/>
        </div>
    </>
 }
 export default Hanshi

函數(shù)組件中轉(zhuǎn)發(fā) ref(forwardRef）: forwardRef 允許父組件訪問(wèn)子組件中的 DOM 元素或組件實(shí)例

使用 forwardRef 將 ref 從父組件傳遞到子組件

父組件通過(guò) inpt 訪問(wèn)子組件中的 <input> 元素

useImperativeHandle 自定義子組件暴露給父組件的 ref 值

useImperativeHandle 允許子組件自定義暴露給父組件的 ref 值

父組件可以通過(guò) inpt.current 調(diào)用子組件暴露的方法（如 focus 和 getValue）

React 類組件 createRef

1. 通過(guò)createRef創(chuàng)建一個(gè)ref對(duì)象
2. 給元素綁定ref屬性值為創(chuàng)建的ref對(duì)象
3. 通過(guò)ref對(duì)象的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>
    }
}

類子組件

父組件通過(guò) ref 訪問(wèn)子組件的實(shí)例，并調(diào)用子組件的方法（如 focus）

這種方式僅適用于類組件，函數(shù)組件沒(méi)有實(shí)例