Vue 和 React 使用ref的示例详解

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

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

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

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

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>
    }
}