React Refs：面向全球开发者的 useRef 与 createRef 深度解析

在充满活力的 React 开发世界中，高效地管理组件状态并与文档对象模型 (DOM) 交互至关重要。React Refs 提供了一种机制，用于直接访问和操作 DOM 元素或 React 组件。创建 Refs 的两种主要方法是 useRef 和 createRef。虽然两者都用于创建 Refs，但它们在实现和用例上有所不同。本指南旨在揭开这两种方法背后的神秘面纱，阐明何时以及如何有效地在您的 React 项目中利用它们，尤其是在为全球受众开发时。

了解 React Refs

Ref（reference 的缩写）是 React 的一个特性，它允许您直接访问 DOM 节点或 React 组件。当您需要执行以下操作时，这特别有用：

• 直接操作 DOM 元素，例如聚焦输入字段。
• 访问子组件的方法或属性。
• 管理在渲染之间保持不变的值，而不会导致重新渲染（类似于类组件中的实例变量）。

虽然 React 鼓励一种声明式方法，即通过状态和 props 来管理 UI，但在某些情况下，直接操作是必要的。Refs 提供了一种弥合 React 声明式性质与命令式 DOM 操作之间差距的方法。

createRef：类组件方法

createRef 是 React 提供的一种方法。它主要用于在类组件中创建 Refs。每次实例化一个类组件时，createRef 都会创建一个新的 Ref 对象。这确保了组件的每个实例都有其自己唯一的 Ref。

语法和用法

要使用 createRef，您首先需要在您的类组件中声明一个 Ref，通常在构造函数中。然后，您使用 ref 属性将 Ref 附加到 DOM 元素或组件。

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }

  componentDidMount() {
    // 在组件挂载后访问 DOM 元素
    this.myRef.current.focus();
  }

  render() {
    return ;
  }
}

在此示例中，this.myRef 是使用 React.createRef() 创建的。然后，它被分配给 input 元素的 ref 属性。在组件挂载后（在 componentDidMount 中），您可以使用 this.myRef.current 访问实际的 DOM 节点并对其执行操作（在这种情况下，聚焦输入）。

示例：聚焦输入字段

让我们考虑一个场景，当组件挂载时，您希望自动聚焦一个输入字段。这是 Refs 的一个常见用例，尤其是在表单或交互式元素中。

class FocusInput extends React.Component {
  constructor(props) {
    super(props);
    this.inputRef = React.createRef();
  }

  componentDidMount() {
    this.inputRef.current.focus();
  }

  render() {
    return (
      

        
      
    );
  }
}

在此示例中，FocusInput 在挂载后立即聚焦输入字段。这可以通过在组件呈现后立即将用户的注意力引向输入元素来改善用户体验。

使用 createRef 的重要注意事项

• 仅限类组件： createRef 专为在类组件中使用而设计。虽然它在功能组件中可能在技术上起作用，但这并非预期用途，并且可能导致意外行为。
• 每个实例都有一个新的 Ref： 类组件的每个实例都会获得其自己的 createRef。这对于保持组件实例之间的隔离非常重要。

useRef：函数组件 Hook

useRef 是 React 16.8 中引入的一个 Hook。它提供了一种在函数组件中创建可变 Ref 对象的方法。与 createRef 不同，useRef 每次组件渲染时都会返回相同的 Ref 对象。这使得它非常适合在渲染之间持久保存值，而不会触发重新渲染。

语法和用法

使用 useRef 非常简单。您调用 useRef Hook，传递一个初始值。Hook 返回一个具有 .current 属性的对象，然后您可以使用该属性来访问和修改该值。

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

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

  useEffect(() => {
    // 在组件挂载后访问 DOM 元素
    if (myRef.current) {
      myRef.current.focus();
    }
  }, []);

  return ;
}

在此示例中，useRef(null) 创建一个初始值为 null 的 Ref。useEffect Hook 用于在组件挂载后访问 DOM 元素。myRef.current 属性保存对 input 元素的引用，允许您聚焦它。

示例：跟踪之前的 Prop 值

useRef 的一个强大用例是跟踪 prop 的先前值。由于对 Refs 的更改不会触发重新渲染，因此您可以使用它们来存储您希望在渲染之间持久保存的值，而不会影响 UI。

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

function PreviousValueComponent({ value }) {
  const previousValue = useRef();

  useEffect(() => {
    previousValue.current = value;
  }, [value]);

  return (
    

      
当前值：{value}
      
先前值：{previousValue.current}
    
  );
}

在此示例中，previousValue.current 存储了 value prop 的先前值。每当 value prop 更改时，useEffect Hook 都会更新 Ref。这允许您比较当前值和先前值，这对于检测更改或实现动画非常有用。

使用 useRef 的重要注意事项

• 仅限函数组件： useRef 是一个 Hook，只能在函数组件或自定义 Hook 中使用。
• 在渲染之间持久保存： useRef Hook 在每次渲染时都会返回相同的 Ref 对象。这是它能够在不触发重新渲染的情况下持久保存值的关键。
• 可变的 .current 属性： 您可以直接修改 Ref 对象的 .current 属性。
• 初始值： 您可以为 useRef 提供一个初始值。当组件首次渲染时，该值将被分配给 .current 属性。
• 无重新渲染： 修改 Ref 的 .current 属性不会导致组件重新渲染。

useRef vs. createRef：详细比较

既然我们已经单独探讨了 useRef 和 createRef，让我们将它们并排比较，以突出它们的主要区别以及何时选择一个而不是另一个。

特征	useRef	createRef
组件类型	函数组件	类组件
Hook 或方法	Hook	方法
Ref 实例	每次渲染时返回相同的 Ref 对象	在组件的每个实例上创建一个新的 Ref 对象
用例	访问 DOM 元素 在渲染之间持久保存值，而不会触发重新渲染 跟踪先前的 prop 值 存储不导致重新渲染的可变值	访问 DOM 元素 访问子组件方法

选择正确的 Ref：决策指南

这是一个简单的指南，可帮助您在 useRef 和 createRef 之间进行选择：

• 您是否正在使用函数组件？ 使用 useRef。
• 您是否正在使用类组件？ 使用 createRef。
• 您是否需要在不触发重新渲染的情况下跨渲染持久保存值？ 使用 useRef。
• 您是否需要跟踪 prop 的先前值？ 使用 useRef。

超越 DOM 操作：Refs 的高级用例

虽然访问和操作 DOM 元素是 Refs 的主要用例，但它们提供了超越此核心功能的可能性。让我们探索 Refs 特别有用的一些高级场景。

1. 访问子组件方法

Refs 可用于访问在子组件中定义的方法。这允许父组件直接从其子组件触发操作或检索数据。当您需要对子组件进行精细控制时，此方法特别有用。

class ParentComponent extends React.Component {
  constructor(props) {
    super(props);
    this.childRef = React.createRef();
  }

  handleClick = () => {
    // 调用子组件上的方法
    this.childRef.current.doSomething();
  };

  render() {
    return (
      

        
        触发子操作
      
    );
  }
}

class ChildComponent extends React.Component {
  doSomething = () => {
    console.log('触发子组件操作！');
  };

  render() {
    return 
这是一个子组件。
;
  }
}

在此示例中，ParentComponent 使用 Ref 访问 ChildComponent 并调用其 doSomething 方法。

2. 管理焦点和选择

Refs 在管理输入字段和其他交互式元素中的焦点和选择方面非常宝贵。这对于创建可访问且用户友好的界面至关重要。

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

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

  useEffect(() => {
    if (inputRef.current) {
      inputRef.current.focus();
      inputRef.current.select(); // 选择输入中的文本
    }
  }, []);

  return ;
}

此示例在组件挂载后立即聚焦输入并选择其文本。

3. 动画元素

Refs 可与动画库（如 GreenSock 或 Framer Motion）结合使用，以直接操作 DOM 并创建复杂的动画。这允许对动画序列进行精细控制。

使用 vanilla JavaScript 简化示例：

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

function AnimatedBox() {
  const boxRef = useRef(null);

  useEffect(() => {
    const box = boxRef.current;
    if (box) {
      // 简单动画：将盒子向右移动
      box.animate(
        [
          { transform: 'translateX(0)' },
          { transform: 'translateX(100px)' },
        ],
        {
          duration: 1000, // 1 秒
          iterations: Infinity, // 永远重复
          direction: 'alternate',
        }
      );
    }
  }, []);

  return 
;
}

此示例使用 Web Animations API 来动画一个简单的盒子，使其水平来回移动。

在全局应用程序中使用 React Refs 的最佳实践

为全球受众开发 React 应用程序时，务必考虑 Refs 如何与国际化 (i18n) 和本地化 (l10n) 交互。以下是一些最佳实践：

1. 可访问性 (A11y)

确保您对 Refs 的使用不会对可访问性产生负面影响。例如，以编程方式聚焦元素时，请考虑用户的焦点顺序以及焦点更改是否适合屏幕阅读器和键盘用户。

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

function AccessibleFocus() {
  const buttonRef = useRef(null);

  useEffect(() => {
    const button = buttonRef.current;
    if (button) {
      // 仅当用户尚未聚焦按钮时才聚焦
      if (document.activeElement !== button) {
        button.focus();
      }
    }
  }, []);

  return 点击我;
}

2. 国际化输入字段

使用输入字段时，请注意不同语言中使用的不同输入法和字符集。确保您基于 Ref 的操作（例如，选择、光标位置）在各种输入类型和语言环境中都能正确运行。使用不同的语言和输入法彻底测试您的组件。

3. 从右到左 (RTL) 布局

如果您的应用程序支持 RTL 语言（例如，阿拉伯语、希伯来语），请确保您使用 Refs 进行的 DOM 操作考虑了反向布局。例如，当对元素进行动画处理时，请考虑为 RTL 语言反转动画方向。

4. 性能注意事项

虽然 Refs 提供了一种与 DOM 交互的强大方法，但过度使用会导致性能问题。直接 DOM 操作绕过了 React 的虚拟 DOM 和协调过程，这可能会导致不一致和更新速度变慢。明智地使用 Refs，仅在必要时使用。

结论

React Refs，特别是 useRef 和 createRef，是 React 开发人员的基本工具。了解每种方法的细微差别以及何时有效地应用它们对于构建稳健且性能良好的应用程序至关重要。createRef 仍然是用于管理类组件内 Refs 的标准，确保每个实例都有其独特的 Ref。useRef 具有跨渲染的持久性，是函数组件的理想选择，提供了一种管理 DOM 元素并在不触发不必要的重新渲染的情况下持久保存值的方法。通过明智地利用这些工具，您可以增强 React 应用程序的功能和用户体验，从而为全球受众提供可访问且性能良好的界面。

随着 React 的不断发展，掌握这些基本概念将使您能够创建超越地理和文化界限的创新和用户友好的 Web 体验。请记住优先考虑可访问性、国际化和性能，以交付真正全球化的应用程序。