ref在Vue和React中获取组件或DOM元素引用的方法

Vue: 

场景：进入页面，van-search搜索框自动聚焦并弹起键盘

使用van-search的 :autofocus="true"，只在第一次进入页面或刷新时能自动聚焦

        <search-box
          ref="searchRef"
          :data="keywords"
          :autofocus="true"
        />


    mounted() {
      this.$nextTick(()=>{
        this.$refs.searchRef.$el.querySelector('input').focus(); 
      })
    },

 

如果 searchRef 引用的是一个Vue组件，

那么 this.$refs.searchRef 将是该组件的实例对象；

this.$refs.searchRef.$el 将是该组件的根DOM元素 

React:

 类组件示例：

import React, { Component } from 'react';  
  
class MyComponent extends Component {  
  constructor(props) {  
    super(props);  
    this.myRef = React.createRef();  
  }  
  
  componentDidMount() {  
    // 通过this.myRef.current访问DOM元素或组件实例  
    console.log(this.myRef.current);  
  }  
  
  render() {  
    return <div ref={this.myRef}>Hello, world!</div>;  
  }  
}  
  
export default MyComponent;

 函数组件示例（使用Hooks）：

import React, { useRef, useEffect } from 'react';  
  
function MyComponent() {  
  const myRef = useRef(null);  
  
  useEffect(() => {  
    // 通过myRef.current访问DOM元素  
    console.log(myRef.current);  
  }, []);  
  
  return <div ref={myRef}>Hello, world!</div>;  
}  
  
export default MyComponent;