精通 React createRef：现代开发的全面指南

在瞬息万变的前端开发世界中，React 作为一款功能强大且用途广泛的 JavaScript 库，在构建用户界面方面脱颖而出。允许 React 开发者直接与文档对象模型（DOM）交互并管理组件行为的关键特性之一就是 createRef API。本指南深入探讨了 createRef 的复杂性，为全球开发者提供了对其用法、优点和最佳实践的全面理解。

理解 React Refs

在深入研究 createRef 之前，理解 React 中 ref 的概念至关重要。ref 提供了一种访问在 render 方法中创建的 DOM 节点或 React 元素的方法。这种访问允许您执行诸如聚焦输入字段、触发动画或测量元素大小等操作。

与传统的 JavaScript DOM 操作不同，React 中的 ref 提供了一种受控且高效的方式来与 DOM 交互。React 的虚拟 DOM 抽象了许多直接 DOM 操作的复杂性，但当需要直接访问时，ref 提供了一座桥梁。

介绍 createRef

createRef 是 React 提供的一个函数，用于创建一个 ref 对象。这个 ref 对象有一个 current 属性，它持有该 ref 附加到的 DOM 节点或 React 组件实例。createRef API 是作为 React 16.3 的一部分引入的，并且是类组件中创建 ref 的推荐方式。对于函数式组件，useRef（一个 React Hook）提供了类似的功能。

创建一个 Ref 对象

要创建一个 ref 对象，只需调用 createRef() 函数：

            import React from 'react';

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

 render() {
 return (
 
 );
 }
}

            

              
                Copy
              
            
          

在此示例中，this.myRef 是一个分配给 input 元素 ref 属性的 ref 对象。组件挂载后，this.myRef 的 current 属性将持有对该 input 元素的引用。

访问 DOM 节点

组件挂载后，您可以通过 ref 对象的 current 属性访问 DOM 节点：

            import React from 'react';

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

 componentDidMount() {
 this.focusInput();
 }

 focusInput() {
 this.myRef.current.focus();
 }

 render() {
 return (
 
 );
 }
}

            

              
                Copy
              
            
          

在此示例中，focusInput 方法使用 this.myRef.current 来访问 input 元素并调用其 focus() 方法。这将在组件挂载时自动聚焦输入字段。

createRef 的用例

在需要直接进行 DOM 操作或访问组件实例的各种场景中，createRef 都非常有价值。以下是一些常见的用例：

• 聚焦文本输入框： 如前例所示，createRef 常用于以编程方式聚焦文本输入框。这对于通过自动聚焦表单中的第一个输入字段或在特定操作后聚焦输入字段来改善用户体验非常有用。
• 管理媒体播放： ref 可用于控制媒体元素，如 <video> 或 <audio>。您可以使用 ref 来播放、暂停或调整媒体元素的音量。例如：

              import React from 'react';
  
  class VideoPlayer extends React.Component {
   constructor(props) {
   super(props);
   this.videoRef = React.createRef();
   this.playVideo = this.playVideo.bind(this);
   }
  
   playVideo() {
   this.videoRef.current.play();
   }
  
   render() {
   return (
   
  
   
   );
   }
  }
  
              
  
                
                  Copy
                
              
            

• 触发动画： ref 可用于访问 DOM 元素并使用 JavaScript 或 CSS 触发动画。这使您可以创建响应用户操作的复杂且交互式的动画。

              import React from 'react';
  
  class AnimatedBox extends React.Component {
   constructor(props) {
   super(props);
   this.boxRef = React.createRef();
   this.animate = this.animate.bind(this);
   }
  
   animate() {
   const box = this.boxRef.current;
   box.classList.add('animate');
   }
  
   render() {
   return (
   
  
   
  
   Animate
   
   );
   }
  }
  
              
  
                
                  Copy
                
              
            

  在此示例中，单击按钮将向 box 元素添加 animate 类，从而触发 CSS 动画。

• 测量元素尺寸和位置： ref对于获取 DOM 元素的尺寸和位置非常有用。此信息可用于布局计算、动态样式或创建交互式元素。

              import React from 'react';
  
  class SizeReporter extends React.Component {
   constructor(props) {
   super(props);
   this.elementRef = React.createRef();
   this.state = { width: 0, height: 0 };
   this.reportSize = this.reportSize.bind(this);
   }
  
   componentDidMount() {
   this.reportSize();
   }
  
   reportSize() {
   const element = this.elementRef.current;
   this.setState({ width: element.offsetWidth, height: element.offsetHeight });
   }
  
   render() {
   return (
   
  
   
  
   
  Width: {this.state.width}px, Height: {this.state.height}px
   
   );
   }
  }
  
              
  
                
                  Copy
                
              
            

  此组件在 div 挂载后报告其宽度和高度。

• 与第三方库集成： ref 通常用于将 React 组件与需要直接 DOM 访问的第三方库集成。例如，您可以使用 ref 访问 DOM 元素并在其上初始化一个 jQuery 插件。

              import React from 'react';
  import $ from 'jquery';
  
  class MyComponent extends React.Component {
   constructor(props) {
   super(props);
   this.elementRef = React.createRef();
   }
  
   componentDidMount() {
   $(this.elementRef.current).plugin(); // Initialize jQuery plugin
   }
  
   render() {
   return 
  ;
   }
  }
  
              
  
                
                  Copy
                
              
            

createRef 与回调 Refs 的比较

在引入 createRef 之前，回调 ref 是在 React 中访问 DOM 节点的常用方法。虽然回调 ref 仍然有效，但 createRef 提供了一种更直接、更简洁的方法，尤其是在类组件中。

回调 ref 是一个函数，React 在调用它时会传入 DOM 节点或组件实例作为参数。您可以将此函数分配给元素的 ref 属性：

            class MyComponent extends React.Component {
 constructor(props) {
 super(props);
 this.myRef = null;
 this.setRef = element => {
 this.myRef = element;
 };
 }

 componentDidMount() {
 if (this.myRef) {
 this.myRef.focus();
 }
 }

 render() {
 return ;
 }
}

            

              
                Copy
              
            
          

虽然这种方法有效，但管理起来可能更复杂，尤其是在处理多个 ref 时。createRef 通过提供一个专用的 ref 对象来简化此过程。

主要区别：

• 可读性： createRef 通常被认为更具可读性且更易于理解。
• 一致性： createRef 提供了一种创建和访问 ref 的一致方式。
• 性能： 在某些情况下，回调 ref 可能会导致不必要的重新渲染，因为回调函数在每次渲染时都是一个新函数。createRef 避免了这个问题。

使用 createRef 的最佳实践

为确保最佳性能和可维护性，在使用 createRef 时请遵循以下最佳实践：

• 在类组件中使用 createRef： createRef 专为在类组件中使用而设计。对于函数式组件，请使用 useRef Hook。
• 避免过度使用 Refs： 应谨慎使用 ref。过度使用 ref 会导致代码难以维护和理解。尽可能优先选择声明式方法。
• 空值检查： 在访问 ref 的 current 属性之前，请务必检查其是否为 null，尤其是在 componentDidMount 生命周期方法中。DOM 节点可能在组件挂载后不会立即可用。

              componentDidMount() {
   if (this.myRef.current) {
   this.myRef.current.focus();
   }
  }
  
              
  
                
                  Copy
                
              
            

• 避免直接修改 DOM： 虽然 ref 提供了对 DOM 的访问权限，但除非绝对必要，否则应避免直接修改 DOM。React 的虚拟 DOM 提供了一种更新 UI 的高效方式，直接的 DOM 操作可能会干扰 React 的渲染过程。
• 必要时清理 Refs： 在某些情况下，您可能需要在组件卸载时清理 ref。这在处理可能持有 DOM 元素引用的第三方库时尤为重要。

在带有 Hooks 的函数式组件中使用 createRef

虽然 createRef 主要用于类组件，但函数式组件可以使用 useRef Hook 实现类似的功能。useRef 返回一个可变的 ref 对象，其 .current 属性被初始化为传入的参数（initialValue）。返回的对象在组件的整个生命周期内都会持续存在。

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

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

 useEffect(() => {
 if (inputRef.current) {
 inputRef.current.focus();
 }
 }, []);

 return ;
}

            

              
                Copy
              
            
          

在此示例中，useRef(null) 创建一个 ref 对象并将其分配给 inputRef 变量。useEffect Hook 用于在组件渲染后聚焦输入字段。空的依赖数组 [] 确保该 effect 仅在初始渲染后运行一次。

高级用例和注意事项

除了基本用例，createRef 还可以用于更高级的场景：

• 转发 Refs： React 提供了一种名为 React.forwardRef 的机制，允许您将 ref 通过一个组件传递给其子组件之一。当您需要从父组件访问子组件内的 DOM 节点时，这非常有用。

              import React, { forwardRef } from 'react';
  
  const FancyInput = forwardRef((props, ref) => (
   
  ));
  
  class ParentComponent extends React.Component {
   constructor(props) {
   super(props);
   this.inputRef = React.createRef();
   }
  
   componentDidMount() {
   this.inputRef.current.focus();
   }
  
   render() {
   return ;
   }
  }
  
              
  
                
                  Copy
                
              
            

  在此示例中，FancyInput 组件使用 forwardRef 将 ref 传递给底层的 input 元素。然后 ParentComponent 就可以通过该 ref 访问和操作 input 元素。

• 高阶组件 (HOCs)： 在使用高阶组件（HOCs）时，您可能需要仔细处理 ref。如果 HOC 包装了一个使用 ref 的组件，您需要确保 ref 被正确转发。

              import React, { forwardRef } from 'react';
  
  function withRef(WrappedComponent) {
   const WithRef = forwardRef((props, ref) => {
   return ;
   });
   WithRef.displayName = `withRef(${WrappedComponent.displayName || WrappedComponent.name || 'Component'})`;
   return WithRef;
  }
  
  class MyComponent extends React.Component {
   render() {
   return 
  My Component
  ;
   }
  }
  
  const EnhancedComponent = withRef(MyComponent);
  
              
  
                
                  Copy
                
              
            

• 服务器端渲染 (SSR)： 在使用服务器端渲染时，请注意 ref 在服务器上的初始渲染期间可能不可用。这是因为 DOM 在服务器上不可用。您只应在组件挂载到客户端后访问 ref。

结论

createRef 是在 React 中访问 DOM 节点和组件实例的强大工具。通过理解其用法、优点和最佳实践，您可以有效地利用 ref 来构建更具交互性和动态性的用户界面。无论您是聚焦文本输入框、管理媒体播放还是与第三方库集成，createRef 都提供了一种受控且高效的方式来与 DOM 交互。

请记住要明智地使用 createRef，并尽可能优先选择声明式方法。通过遵循本指南中概述的指导方针，您可以确保您的 React 应用程序是高性能、可维护且可扩展的。

在您的 React 学习之旅中，精通 createRef 无疑将成为您开发工具箱中一项宝贵的技能。继续试验、探索不同的用例，并加深您对这一基本 React 特性的理解。