使用useRef挂钩获取对React组件的引用

基础概念

useRef 是 React 中的一个 Hook，用于在函数组件中创建一个可变的引用对象。这个引用对象在组件的整个生命周期内保持不变，并且可以在组件的任何地方访问。useRef 返回的引用对象有一个 current 属性，初始值由你提供，并且可以在组件的任何地方被修改。

优势

持久引用：useRef 创建的引用在整个组件生命周期内保持不变，即使组件重新渲染也不会丢失。
直接操作DOM：可以用来获取 DOM 元素的引用，从而直接操作 DOM。
存储可变值：除了用于 DOM 引用，还可以用来存储任何可变的值，这些值在组件重新渲染时不会丢失。

类型

DOM 引用：最常见的用途是获取 DOM 元素的引用。
存储值：可以用来存储组件内部的临时状态或其他需要在渲染之间保持的值。

应用场景

聚焦输入框：使用 useRef 来获取输入框的引用，并在需要时调用其 focus 方法。
动画控制：通过引用控制动画元素的样式或属性。
访问子组件实例：在父组件中引用子组件实例，以便调用子组件的方法。

示例代码

获取 DOM 元素引用

import React, { useRef } from 'react';

function TextInput() {
  const inputRef = useRef(null);

  const focusInput = () => {
    inputRef.current.focus();
  };

  return (
    <div>
      <input ref={inputRef} type="text" />
      <button onClick={focusInput}>Focus the input</button>
    </div>
  );
}

存储可变值

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

function Timer() {
  const [count, setCount] = useState(0);
  const prevCountRef = useRef();

  useEffect(() => {
    prevCountRef.current = count;
  });

  const prevCount = prevCountRef.current;

  return (
    <div>
      <p>Current Count: {count}</p>
      <p>Previous Count: {prevCount}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

遇到的问题及解决方法

问题：`useRef` 的 `current` 属性为 `null`

原因：通常发生在尝试访问 DOM 元素时，该元素尚未挂载到 DOM 树上。

解决方法：确保在组件挂载后再访问 useRef 的 current 属性。可以使用 useEffect 钩子来确保 DOM 已经更新。

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

function MyComponent() {
  const myRef = useRef(null);

  useEffect(() => {
    if (myRef.current) {
      // 此时可以安全地访问 myRef.current
      console.log(myRef.current);
    }
  }, []);

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

通过这种方式，可以确保在组件挂载后访问引用，避免 null 引用的问题。