Làm chủ các mẫu Ref trong React: Thao tác DOM và API mệnh lệnh cho các nhà phát triển toàn cầu

Trong thế giới khai báo của React, nơi các component mô tả giao diện người dùng trông như thế nào dựa trên state và props, thường có những lúc việc truy cập trực tiếp vào Document Object Model (DOM) hoặc tương tác với các API mệnh lệnh trở nên không chỉ hữu ích mà còn thiết yếu. Đây chính là lúc mẫu `ref` của React tỏa sáng. Đối với các nhà phát triển trên toàn cầu, việc hiểu và sử dụng hiệu quả các ref là nền tảng để xây dựng các ứng dụng web phức tạp, hiệu suất cao và tương tác. Hướng dẫn toàn diện này sẽ đi sâu vào sự phức tạp của React refs, khám phá các trường hợp sử dụng chính của chúng trong thao tác DOM và giao tiếp với các API mệnh lệnh, tất cả đều từ góc độ toàn cầu.

Tại sao chúng ta cần Refs trong React?

Bản chất khai báo của React là thế mạnh lớn nhất của nó, cho phép chúng ta xây dựng giao diện người dùng bằng cách kết hợp các component tự quản lý trạng thái của chúng. Tuy nhiên, không phải tất cả các chức năng của trình duyệt hoặc thư viện bên thứ ba đều hoạt động trong mô hình khai báo này. Đôi khi, chúng ta cần:

• Quản lý tiêu điểm, chọn văn bản hoặc phát đa phương tiện.
• Kích hoạt các hiệu ứng động mang tính mệnh lệnh.
• Tích hợp với các thư viện DOM bên thứ ba (ví dụ: thư viện biểu đồ, công cụ bản đồ).
• Đo kích thước hoặc vị trí của các nút DOM.
• Truy cập các API của trình duyệt yêu cầu một phần tử DOM trực tiếp.

Mặc dù React khuyến khích luồng dữ liệu từ trên xuống, ref cung cấp một \"lối thoát\" có kiểm soát để tương tác với DOM cơ bản hoặc các hệ thống bên ngoài khi cần thiết. Hãy coi nó như một cách để \"vươn tới\" cây DOM khi phương pháp khai báo không đáp ứng đủ.

Hiểu về thuộc tính `ref`

Thuộc tính `ref` trong React rất đặc biệt. Khi bạn truyền một `ref` cho một phần tử DOM trong JSX của mình, React sẽ gán một thuộc tính `current` có thể thay đổi cho đối tượng ref đó, trỏ đến nút DOM thực tế sau khi component đã được mount. Tương tự, khi được sử dụng với các class component hoặc function component trả về JSX, nó có thể được dùng để tham chiếu đến chính instance của component.

Refs trong Function Component (Hooks)

Kể từ khi React Hooks được giới thiệu, cách chính để quản lý refs trong function component là thông qua hook useRef. useRef trả về một đối tượng ref có thể thay đổi mà thuộc tính `.current` của nó được khởi tạo với đối số được truyền vào (initialValue). Đối tượng được trả về sẽ tồn tại trong suốt vòng đời của component.

Ví dụ: Tập trung vào trường nhập liệu khi mount

Hãy tưởng tượng một biểu mẫu đăng nhập đơn giản nơi bạn muốn trường nhập liệu tên người dùng tự động được tập trung khi component tải. Đây là một trường hợp sử dụng kinh điển cho refs.

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

function LoginForm() {
  // Create a ref object
  const usernameInputRef = useRef(null);

  useEffect(() => {
    // Access the DOM node via the .current property
    if (usernameInputRef.current) {
      usernameInputRef.current.focus();
    }
  }, []); // The empty dependency array ensures this effect runs only once after the initial render

  return (
    

      Username:
      {/* Assign the ref to the input element */}
      
      Login
    
  );
}

export default LoginForm;

            

              
                Copy
              
            
          

Trong ví dụ này:

• Chúng ta khởi tạo usernameInputRef với useRef(null).
• Chúng ta gắn ref này vào phần tử <input> bằng cách sử dụng thuộc tính `ref`.
• Bên trong hook useEffect, sau khi component được mount, usernameInputRef.current sẽ trỏ đến phần tử input DOM thực tế.
• Sau đó, chúng ta gọi phương thức DOM gốc .focus() trên phần tử này.

Mẫu này cực kỳ hiệu quả cho các trường hợp yêu cầu tương tác trực tiếp với DOM ngay sau khi component render, một yêu cầu phổ biến trong thiết kế giao diện người dùng trên toàn cầu.

Refs trong Class Component

Trong class component, refs thường được tạo bằng cách sử dụng React.createRef() hoặc bằng cách truyền một hàm callback vào thuộc tính ref.

Sử dụng React.createRef()

            
import React, { Component } from 'react';

class ClassLoginForm extends Component {
  constructor(props) {
    super(props);
    // Create a ref
    this.usernameInputRef = React.createRef();
  }

  componentDidMount() {
    // Access the DOM node via the .current property
    if (this.usernameInputRef.current) {
      this.usernameInputRef.current.focus();
    }
  }

  render() {
    return (
      

        Username:
        {/* Assign the ref to the input element */}
        
        Login
      
    );
  }
}

export default ClassLoginForm;

            

              
                Copy
              
            
          

Khái niệm vẫn giữ nguyên: tạo một ref, gắn nó vào một phần tử DOM và truy cập thuộc tính `.current` của nó để tương tác với nút DOM.

Sử dụng Callback Refs

Callback ref cung cấp nhiều quyền kiểm soát hơn, đặc biệt khi làm việc với các danh sách động hoặc khi bạn cần thực hiện các hành động dọn dẹp. Một callback ref là một hàm mà React sẽ gọi với phần tử DOM khi component được mount, và với null khi nó unmount.

            
import React, { Component } from 'react';

class CallbackRefExample extends Component {
  focusInput = null;

  setFocusInputRef = (element) => {
    this.focusInput = element;
    if (this.focusInput) {
      this.focusInput.focus();
    }
  };

  render() {
    return (
      

        
      
    );
  }
}

export default CallbackRefExample;

            

              
                Copy
              
            
          

Callback ref đặc biệt hữu ích cho việc quản lý refs trong các vòng lặp hoặc render có điều kiện, đảm bảo rằng ref được cập nhật chính xác.

Các mẫu Ref nâng cao để thao tác DOM

Ngoài việc quản lý tiêu điểm đơn giản, refs còn hỗ trợ các thao tác DOM phức tạp, vốn rất quan trọng đối với các ứng dụng web hiện đại được sử dụng bởi nhiều đối tượng toàn cầu.

Đo kích thước các nút DOM

Bạn có thể cần lấy kích thước hoặc vị trí của một phần tử để triển khai bố cục phản hồi, hoạt ảnh hoặc tooltip. Refs là cách tiêu chuẩn để đạt được điều này.

Ví dụ: Hiển thị kích thước phần tử

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

function ElementDimensions() {
  const elementRef = useRef(null);
  const [dimensions, setDimensions] = useState({ width: 0, height: 0 });

  useEffect(() => {
    const updateDimensions = () => {
      if (elementRef.current) {
        setDimensions({
          width: elementRef.current.offsetWidth,
          height: elementRef.current.offsetHeight,
        });
      }
    };

    updateDimensions(); // Initial measurement

    // Update on resize for a dynamic experience
    window.addEventListener('resize', updateDimensions);

    // Cleanup the event listener on unmount
    return () => {
      window.removeEventListener('resize', updateDimensions);
    };
  }, []);

  return (
    

      

        Measure Me!
      
      
Width: {dimensions.width}px
      
Height: {dimensions.height}px
    
  );
}

export default ElementDimensions;

            

              
                Copy
              
            
          

Điều này cho thấy cách gắn một ref vào một thẻ `div`, đo offsetWidth và offsetHeight của nó, và cập nhật trạng thái. Việc bao gồm một trình lắng nghe sự kiện cho việc thay đổi kích thước cửa sổ đảm bảo kích thước vẫn chính xác trong các môi trường quốc tế có khả năng phản hồi.

Cuộn vào khung nhìn

Đối với các ứng dụng có nội dung dài, việc cuộn mượt mà đến một phần tử cụ thể là một yêu cầu trải nghiệm người dùng phổ biến. API trình duyệt gốc element.scrollIntoView() là hoàn hảo cho việc này, và bạn truy cập nó thông qua refs.

Ví dụ: Cuộn đến một phần cụ thể

            
import React, { useRef } => 'react';

function ScrollableContent() {
  const sectionRefs = useRef({});

  const scrollToSection = (sectionName) => {
    if (sectionRefs.current[sectionName]) {
      sectionRefs.current[sectionName].scrollIntoView({
        behavior: 'smooth',
        block: 'start',
      });
    }
  };

  const addRefToSection = (sectionName, element) => {
    if (element) {
      sectionRefs.current[sectionName] = element;
    }
  };

  return (
    

       scrollToSection('section2')}>Go to Section 2
       scrollToSection('section3')}>Go to Section 3

      

        
 addRefToSection('section1', el)} style={{ height: '300px', backgroundColor: '#f0f0f0', marginBottom: '10px', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
          
Section 1
        
        
 addRefToSection('section2', el)} style={{ height: '300px', backgroundColor: '#e0e0e0', marginBottom: '10px', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
          
Section 2
        
        
 addRefToSection('section3', el)} style={{ height: '300px', backgroundColor: '#d0d0d0', marginBottom: '10px', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
          
Section 3
        
      
    
  );
}

export default ScrollableContent;

            

              
                Copy
              
            
          

Ví dụ này sử dụng một đối tượng ref để lưu trữ nhiều phần tử DOM, cho phép cuộn động đến các phần khác nhau của trang. Tùy chọn behavior: 'smooth' mang lại trải nghiệm người dùng dễ chịu, được đánh giá cao trên toàn cầu.

Tích hợp với các thư viện bên thứ ba

Nhiều thư viện biểu đồ, bản đồ hoặc hoạt hình mạnh mẽ mong đợi được khởi tạo bằng một phần tử DOM. Refs là cầu nối giữa mô hình component của React và các thư viện mệnh lệnh này.

Ví dụ: Sử dụng một thư viện biểu đồ giả định

Giả sử chúng ta có một `ChartComponent` nhận một phần tử DOM để render biểu đồ.

            
import React, { useRef, useEffect } from 'react';
// Assume ChartLibrary is an external library
// import ChartLibrary from 'some-chart-library';

// Placeholder for the external charting library logic
const initializeChart = (element, data) => {
  console.log('Initializing chart on:', element, 'with data:', data);
  // In a real scenario, this would be ChartLibrary.init(element, data);
  element.style.border = '2px dashed green'; // Visual cue
  return { 
    update: (newData) => console.log('Updating chart with:', newData),
    destroy: () => console.log('Destroying chart') 
  };
};

function ChartContainer({ chartData }) {
  const chartRef = useRef(null);
  const chartInstance = useRef(null);

  useEffect(() => {
    if (chartRef.current) {
      // Initialize the chart library with the DOM element
      chartInstance.current = initializeChart(chartRef.current, chartData);
    }

    // Cleanup function to destroy the chart instance when the component unmounts
    return () => {
      if (chartInstance.current) {
        chartInstance.current.destroy();
      }
    };
  }, [chartData]); // Re-initialize if chartData changes

  return (
    

      {/* The chart will be rendered here by the library */}
    
  );
}

export default ChartContainer;

            

              
                Copy
              
            
          

Ở đây, chartRef được gắn vào một thẻ `div`. Bên trong useEffect, chúng ta gọi một hàm initializeChart giả định với nút DOM. Điều quan trọng là, chúng ta cũng bao gồm một hàm dọn dẹp để phá hủy đúng cách instance của biểu đồ khi component unmount, ngăn ngừa rò rỉ bộ nhớ—một yếu tố cân nhắc quan trọng cho các ứng dụng chạy dài hạn.

Refs và API mệnh lệnh

API mệnh lệnh là các hàm hoặc phương thức ra lệnh một chuỗi các thao tác để đạt được kết quả. Mặc dù React mang tính khai báo, nó thường xuyên tương tác với các API trình duyệt mệnh lệnh (như chính DOM API) hoặc các API được cung cấp bởi các thư viện bên thứ ba.

Quản lý phát đa phương tiện

Các phần tử đa phương tiện HTML5 (`<video>`, `<audio>`) cung cấp các API mệnh lệnh để điều khiển phát lại (phát, tạm dừng, tìm kiếm, v.v.). Refs là cần thiết để truy cập các phương thức này.

Ví dụ: Điều khiển trình phát video tùy chỉnh

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

function CustomVideoPlayer({ src }) {
  const videoRef = useRef(null);
  const [isPlaying, setIsPlaying] = useState(false);

  const togglePlay = () => {
    if (videoRef.current) {
      if (videoRef.current.paused) {
        videoRef.current.play();
        setIsPlaying(true);
      } else {
        videoRef.current.pause();
        setIsPlaying(false);
      }
    }
  };

  return (
    

      
      

        
          {isPlaying ? 'Pause' : 'Play'}
        
      
    
  );
}

export default CustomVideoPlayer;

            

              
                Copy
              
            
          

Trong ví dụ này, videoRef cung cấp quyền truy cập vào các phương thức `play()` và `pause()` của phần tử `<video>`, cho phép điều khiển phát lại tùy chỉnh. Đây là một mẫu phổ biến để tăng cường trải nghiệm đa phương tiện trên các nền tảng toàn cầu đa dạng.

API trình duyệt

Một số API trình duyệt nhất định, như Clipboard API, Fullscreen API hoặc Web Animations API, thường yêu cầu tham chiếu đến một phần tử DOM.

Ví dụ: Sao chép văn bản vào Clipboard

            
import React, { useRef } from 'react';

function CopyToClipboardButton({ textToCopy }) {
  const textRef = useRef(null);

  const copyText = async () => {
    if (textRef.current) {
      try {
        // Use the modern Clipboard API
        await navigator.clipboard.writeText(textRef.current.innerText);
        alert('Text copied to clipboard!');
      } catch (err) {
        console.error('Failed to copy text: ', err);
        alert('Failed to copy text. Please try manually.');
      }
    }
  };

  return (
    

      
{textToCopy}
      Copy Text
    
  );
}

export default CopyToClipboardButton;

            

              
                Copy
              
            
          

Ở đây, textRef được sử dụng để lấy nội dung văn bản của một đoạn. Phương thức navigator.clipboard.writeText(), một API trình duyệt mạnh mẽ, sau đó được sử dụng để sao chép văn bản này. Chức năng này rất có giá trị đối với người dùng trên toàn thế giới, những người thường xuyên chia sẻ thông tin.

Những cân nhắc chính và các phương pháp hay nhất

Mặc dù mạnh mẽ, refs nên được sử dụng một cách thận trọng. Lạm dụng refs cho các tác vụ có thể được xử lý một cách khai báo có thể dẫn đến hành vi component ít dự đoán được hơn.

• Giảm thiểu mã mệnh lệnh: Luôn cố gắng đạt được mục tiêu của bạn bằng cách khai báo trước. Chỉ sử dụng refs khi thực sự cần thiết cho các tác vụ mệnh lệnh.
• Hiểu vòng đời: Hãy nhớ rằng ref.current chỉ được điền sau khi component đã được mount. Truy cập nó trước khi mount hoặc sau khi unmount có thể dẫn đến lỗi. useEffect (đối với function component) và componentDidMount/componentDidUpdate (đối với class component) là những nơi thích hợp để thao tác DOM thông qua refs.
• Dọn dẹp: Đối với các tài nguyên được quản lý thông qua refs (như trình lắng nghe sự kiện, đăng ký hoặc các instance của thư viện bên ngoài), hãy luôn triển khai các hàm dọn dẹp trong useEffect hoặc componentWillUnmount để ngăn ngừa rò rỉ bộ nhớ.
• Chuyển tiếp Refs (Forwarding Refs): Khi tạo các component có thể tái sử dụng cần phơi bày refs cho các phần tử DOM cơ bản của chúng (ví dụ: các component input tùy chỉnh), hãy sử dụng React.forwardRef. Điều này cho phép các component cha gắn refs vào các nút DOM của component tùy chỉnh của bạn.

Ví dụ: Chuyển tiếp Refs

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

// A custom input component that exposes its DOM input element
const CustomInput = forwardRef((props, ref) => {
  return (
    
  );
});

function ParentComponent() {
  const inputElementRef = useRef(null);

  const focusCustomInput = () => {
    if (inputElementRef.current) {
      inputElementRef.current.focus();
    }
  };

  return (
    

      
      Focus Custom Input
    
  );
}

export default ParentComponent;

            

              
                Copy
              
            
          

Trong kịch bản này, CustomInput sử dụng forwardRef để nhận ref từ component cha và truyền nó xuống phần tử <input> gốc. Điều này rất quan trọng để xây dựng các thư viện giao diện người dùng linh hoạt và có khả năng kết hợp.

Refs và State

Điều quan trọng là phải phân biệt giữa refs và state. Thay đổi state kích hoạt việc re-render, cho phép React cập nhật giao diện người dùng. Ngược lại, refs là các container có thể thay đổi nhưng không kích hoạt re-render khi thuộc tính `.current` của chúng thay đổi. Hãy sử dụng state cho dữ liệu ảnh hưởng đến kết quả render và refs để truy cập các nút DOM hoặc lưu trữ các giá trị có thể thay đổi mà không trực tiếp gây ra cập nhật giao diện người dùng.

Kết luận: Nâng cao Phát triển Toàn cầu với React Refs

Mẫu ref của React là một công cụ mạnh mẽ để kết nối thế giới khai báo của React với bản chất mệnh lệnh của thao tác DOM và các API bên ngoài. Đối với các nhà phát triển trên toàn thế giới, việc nắm vững refs cho phép tạo ra các giao diện người dùng có tính tương tác cao, hiệu suất tốt và tinh vi. Cho dù đó là quản lý tiêu điểm, đo bố cục, điều khiển đa phương tiện hay tích hợp các thư viện phức tạp, refs đều cung cấp một cơ chế có kiểm soát và hiệu quả.

Bằng cách tuân thủ các phương pháp hay nhất, hiểu vòng đời component và sử dụng các kỹ thuật như chuyển tiếp ref, các nhà phát triển có thể tận dụng React refs để xây dựng các ứng dụng mạnh mẽ phục vụ khán giả toàn cầu, đảm bảo trải nghiệm người dùng liền mạch bất kể vị trí hoặc thiết bị của họ.

Khi bạn tiếp tục hành trình phát triển React của mình, hãy nhớ rằng refs là một phần không thể thiếu trong bộ công cụ của bạn, mang lại sự linh hoạt cần thiết để giải quyết nhiều thách thức giao diện người dùng phức tạp. Hãy sử dụng chúng một cách khôn ngoan, và bạn sẽ mở khóa những cấp độ kiểm soát và khả năng mới trong các ứng dụng của mình.