不同框架中，useRef 三兄弟的使用方法与差别

2023-10-04 14:29:15

在前端开发中，使用框架可以大大简化开发流程，但不同框架之间的差异有时会带来一些挑战。特别是在处理 DOM 元素引用时，了解如何在不同的框架中使用 useRef 变得尤为重要。

useRef 三兄弟简介

useRef 是一个在函数组件中创建可变引用的 Hook，它允许我们在组件中持久化存储数据，而不触发重新渲染。在不同的前端框架中，useRef 的实现和使用方式有所不同，主要体现在 React、Vue 和 Angular 这三大框架中。

React 中的 useRef

在 React 中，useRef 返回一个可变的 ref 对象，该对象在组件的整个生命周期内保持不变。这个 ref 对象有一个 current 属性，指向 DOM 元素的当前值。

import React, { useRef, useEffect } from 'react';

function Example() {
  const ref = useRef(null);

  useEffect(() => {
    console.log(ref.current); // 输出 DOM 元素的当前值
  }, []);

  return <div ref={ref}>Hello, World!</div>;
}

在这个例子中，useRef 创建了一个 ref 对象，并通过 ref 属性将其附加到 DOM 元素上。在 useEffect 中，我们可以访问并操作这个 DOM 元素。

Vue 中的 ref

在 Vue 3 中，ref 主要用于组合式 API 中，它可以用来创建响应式的引用。

<template>
  <div ref="myDiv">Hello, Vue!</div>
</template>

<script>
import { ref, onMounted } from 'vue';

export default {
  setup() {
    const myDiv = ref(null);

    onMounted(() => {
      console.log(myDiv.value); // 输出 DOM 元素
    });

    return {
      myDiv,
    };
  },
};
</script>

在 Vue 中，ref 函数返回一个响应式且可变的 ref 对象。当 ref 对象被赋予一个 DOM 元素时，可以通过 .value 属性访问该元素。

Angular 中的 ElementRef

在 Angular 中，我们通常使用 ViewChild 装饰器和 ElementRef 类来获取 DOM 元素的引用。

import { Component, ElementRef, ViewChild, AfterViewInit } from '@angular/core';

@Component({
  selector: 'app-example',
  template: `<div #myDiv>Hello, Angular!</div>`,
})
export class ExampleComponent implements AfterViewInit {
  @ViewChild('myDiv') myDiv: ElementRef;

  ngAfterViewInit() {
    console.log(this.myDiv.nativeElement); // 输出 DOM 元素
  }
}