你不知道的 useRef 初次渲染获取 Dom 的秘密

2023-09-21 16:53:37

前言

在 React 中，使用 useRef 是一种获取 DOM 元素引用的常见方法。然而，初次渲染时，useRef 却无法在回调函数中获取到 DOM 元素，这可能会让人感到困惑。本文将深入探讨这一现象，并提供解决方案，让你在初次渲染时也能轻松获取 DOM 元素。

useRef 的原理

useRef 是一个 React Hook，它返回一个可变的 ref 对象，该对象包含一个 .current 属性，该属性最初为 null。当 ref 对象附加到一个 DOM 元素时，.current 属性将指向该元素。

初次渲染的限制

在初次渲染期间，React 会创建一个虚拟 DOM，并根据它来创建实际的 DOM。在这个过程中，useRef 附加到 DOM 元素的时间晚于组件的渲染。因此，在初次渲染时，useRef 的 .current 属性仍然为 null，无法获取到 DOM 元素。

解决方法

要解决这个问题，需要在 DOM 元素创建后才能获取其引用。有两种常见的方法：

1. 使用 useEffect

useEffect 是另一个 React Hook，它允许在组件渲染后执行副作用。我们可以使用 useEffect 来在 DOM 元素创建后获取其引用：

import { useEffect, useRef } from "react";

const MyComponent = () => {
  const ref = useRef();

  useEffect(() => {
    if (ref.current) {
      // 在这里使用 ref.current
    }
  }, []);

  return <div ref={ref}>...</div>;
};

2. 使用回调 ref

React 16.8 引入了回调 ref，它允许在 ref 对象创建时指定一个回调函数。该回调函数将在 DOM 元素创建后执行，并接收 DOM 元素作为参数：

import { useRef } from "react";

const MyComponent = () => {
  const ref = useRef((element) => {
    if (element) {
      // 在这里使用 element
    }
  });

  return <div ref={ref}>...</div>;
};