React useImperativeHandle: Nắm Vững Các Mẫu Tùy Chỉnh Ref

Hook useImperativeHandle của React là một công cụ mạnh mẽ để tùy chỉnh giá trị instance được hiển thị cho các component cha khi sử dụng React.forwardRef. Mặc dù React thường khuyến khích lập trình khai báo, useImperativeHandle cung cấp một lỗ hổng thoát kiểm soát cho các tương tác mệnh lệnh khi cần thiết. Bài viết này khám phá các trường hợp sử dụng khác nhau, thực tiễn tốt nhất và các mẫu nâng cao để sử dụng hiệu quả useImperativeHandle nhằm nâng cao các component React của bạn.

Tìm Hiểu Refs và forwardRef

Trước khi đi sâu vào useImperativeHandle, điều cần thiết là phải hiểu refs và forwardRef. Refs cung cấp một cách để truy cập vào nút DOM cơ bản hoặc instance component React. Tuy nhiên, việc truy cập trực tiếp có thể vi phạm các nguyên tắc luồng dữ liệu một chiều của React và nên được sử dụng một cách tiết kiệm.

forwardRef cho phép bạn truyền một ref cho một component con. Điều này rất quan trọng khi bạn cần component cha tương tác trực tiếp với một phần tử DOM hoặc component bên trong component con. Dưới đây là một ví dụ cơ bản:

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

const MyInput = forwardRef((props, ref) => {
  return <input ref={ref} {...props} />; // Assign the ref to the input element
});

const ParentComponent = () => {
  const inputRef = useRef(null);

  const focusInput = () => {
    inputRef.current.focus(); // Imperatively focus the input
  };

  return (
    <div>
      <MyInput ref={inputRef} />
      <button onClick={focusInput}>Focus Input</button>
    </div>
  );
};

export default ParentComponent;

            

              
                Copy
              
            
          

Giới Thiệu useImperativeHandle

useImperativeHandle cho phép bạn tùy chỉnh giá trị instance được hiển thị bởi forwardRef. Thay vì hiển thị toàn bộ nút DOM hoặc instance component, bạn có thể chọn lọc hiển thị các phương thức hoặc thuộc tính cụ thể. Điều này cung cấp một giao diện được kiểm soát để các component cha tương tác với component con, duy trì mức độ đóng gói nhất định.

Hook useImperativeHandle chấp nhận ba đối số:

• ref: Đối tượng ref được truyền từ component cha thông qua forwardRef.
• createHandle: Một hàm trả về giá trị bạn muốn hiển thị. Hàm này có thể định nghĩa các phương thức hoặc thuộc tính mà component cha có thể truy cập thông qua ref.
• dependencies: Một mảng các phụ thuộc tùy chọn. Hàm createHandle sẽ chỉ được thực thi lại nếu một trong các phụ thuộc này thay đổi. Điều này tương tự như mảng phụ thuộc trong useEffect.

Ví Dụ Cơ Bản về useImperativeHandle

Hãy sửa đổi ví dụ trước để sử dụng useImperativeHandle chỉ hiển thị các phương thức focus và blur, ngăn chặn truy cập trực tiếp vào các thuộc tính khác của phần tử input.

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

const MyInput = forwardRef((props, ref) => {
  const inputRef = useRef(null);

  useImperativeHandle(ref, () => ({
    focus: () => {
      inputRef.current.focus();
    },
    blur: () => {
      inputRef.current.blur();
    },
  }), []);

  return <input ref={inputRef} {...props} />; // Assign the ref to the input element
});

const ParentComponent = () => {
  const inputRef = useRef(null);

  const focusInput = () => {
    inputRef.current.focus(); // Imperatively focus the input
  };

  return (
    <div>
      <MyInput ref={inputRef} />
      <button onClick={focusInput}>Focus Input</button>
    </div>
  );
};

export default ParentComponent;

            

              
                Copy
              
            
          

Trong ví dụ này, component cha chỉ có thể gọi các phương thức focus và blur trên đối tượng inputRef.current. Nó không thể truy cập trực tiếp các thuộc tính khác của phần tử input, từ đó tăng cường tính đóng gói.

Các Mẫu useImperativeHandle Phổ Biến

1. Hiển Thị Các Phương Thức Component Cụ Thể

Một trường hợp sử dụng phổ biến là hiển thị các phương thức từ một component con mà component cha cần kích hoạt. Ví dụ, hãy xem xét một component trình phát video tùy chỉnh.

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

const VideoPlayer = forwardRef((props, ref) => {
  const videoRef = useRef(null);
  const [isPlaying, setIsPlaying] = useState(false);

  const play = () => {
    videoRef.current.play();
    setIsPlaying(true);
  };

  const pause = () => {
    videoRef.current.pause();
    setIsPlaying(false);
  };

  useImperativeHandle(ref, () => ({
    play,
    pause,
    togglePlay: () => {
      if (isPlaying) {
        pause();
      } else {
        play();
      }
    },
  }), [isPlaying]);

  return (
    <div>
      <video ref={videoRef} src={props.src} controls={false} />
      <button onClick={() => ref.current.togglePlay()}>Toggle Play</button>
    </div>
  );
});

const ParentComponent = () => {
  const playerRef = useRef(null);

  return (
    <div>
      <VideoPlayer ref={playerRef} src="video.mp4" />
      <button onClick={() => playerRef.current.play()}>Play Video</button>
    </div>
  );
};

export default ParentComponent;

            

              
                Copy
              
            
          

Trong ví dụ này, component cha có thể gọi play, pause hoặc togglePlay trên đối tượng playerRef.current. Component trình phát video đóng gói phần tử video và logic phát/tạm dừng của nó.

2. Điều Khiển Hoạt Ảnh và Chuyển Đổi

useImperativeHandle có thể hữu ích để kích hoạt hoạt ảnh hoặc chuyển đổi bên trong một component con từ một component cha.

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

const AnimatedBox = forwardRef((props, ref) => {
  const boxRef = useRef(null);
  const [isAnimating, setIsAnimating] = useState(false);

  const animate = () => {
    setIsAnimating(true);
    // Add animation logic here (e.g., using CSS transitions)
    setTimeout(() => {
      setIsAnimating(false);
    }, 1000); // Duration of the animation
  };

  useImperativeHandle(ref, () => ({
    animate,
  }), []);

  return (
    <div
      ref={boxRef}
      style={{
        width: 100,
        height: 100,
        backgroundColor: 'blue',
        transition: 'transform 1s ease-in-out',
        transform: isAnimating ? 'translateX(100px)' : 'translateX(0)',
      }}
    />
  );
});

const ParentComponent = () => {
  const boxRef = useRef(null);

  return (
    <div>
      <AnimatedBox ref={boxRef} />
      <button onClick={() => boxRef.current.animate()}>Animate Box</button>
    </div>
  );
};

export default ParentComponent;

            

              
                Copy
              
            
          

Component cha có thể kích hoạt hoạt ảnh trong component AnimatedBox bằng cách gọi boxRef.current.animate(). Logic hoạt ảnh được đóng gói bên trong component con.

3. Triển Khai Xác Thực Form Tùy Chỉnh

useImperativeHandle có thể tạo điều kiện thuận lợi cho các kịch bản xác thực form phức tạp, nơi component cha cần kích hoạt logic xác thực bên trong các trường form con.

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

const InputField = forwardRef((props, ref) => {
  const inputRef = useRef(null);
  const [error, setError] = useState('');

  const validate = () => {
    if (inputRef.current.value === '') {
      setError('This field is required.');
      return false;
    } else {
      setError('');
      return true;
    }
  };

  useImperativeHandle(ref, () => ({
    validate,
  }), []);

  return (
    <div>
      <input ref={inputRef} {...props} />
      {error && <p style={{ color: 'red' }}>{error}</p>}
    </div>
  );
});

const ParentForm = () => {
  const nameRef = useRef(null);
  const emailRef = useRef(null);

  const handleSubmit = () => {
    const isNameValid = nameRef.current.validate();
    const isEmailValid = emailRef.current.validate();

    if (isNameValid && isEmailValid) {
      alert('Form is valid!');
    } else {
      alert('Form is invalid.');
    }
  };

  return (
    <form>
      <InputField ref={nameRef} type="text" placeholder="Name" />
      <InputField ref={emailRef} type="email" placeholder="Email" />
      <button type="button" onClick={handleSubmit}>Submit</button>
    </form>
  );
};

export default ParentForm;

            

              
                Copy
              
            
          

Component form cha có thể kích hoạt logic xác thực bên trong mỗi component InputField bằng cách gọi nameRef.current.validate() và emailRef.current.validate(). Mỗi trường input xử lý các quy tắc xác thực và thông báo lỗi riêng của nó.

Những Cân Nhắc Nâng Cao và Thực Tiễn Tốt Nhất

1. Giảm Thiểu Tương Tác Mệnh Lệnh

Mặc dù useImperativeHandle cung cấp một cách để thực hiện các hành động mệnh lệnh, điều quan trọng là phải giảm thiểu việc sử dụng chúng. Lạm dụng các mẫu mệnh lệnh có thể làm cho mã của bạn khó hiểu, khó kiểm tra và khó bảo trì hơn. Hãy xem xét liệu một phương pháp khai báo (ví dụ: truyền props và sử dụng cập nhật trạng thái) có thể đạt được kết quả tương tự hay không.

2. Thiết Kế API Cẩn Thận

Khi sử dụng useImperativeHandle, hãy thiết kế cẩn thận API mà bạn hiển thị cho component cha. Chỉ hiển thị các phương thức và thuộc tính cần thiết, và tránh hiển thị các chi tiết triển khai nội bộ. Điều này thúc đẩy tính đóng gói và làm cho các component của bạn có khả năng chống lại các thay đổi tốt hơn.

3. Quản Lý Phụ Thuộc

Hãy chú ý kỹ đến mảng phụ thuộc của useImperativeHandle. Việc bao gồm các phụ thuộc không cần thiết có thể dẫn đến các vấn đề về hiệu suất, vì hàm createHandle sẽ được thực thi lại thường xuyên hơn mức cần thiết. Ngược lại, việc bỏ qua các phụ thuộc cần thiết có thể dẫn đến các giá trị cũ và hành vi không mong muốn.

4. Cân Nhắc Về Khả Năng Tiếp Cận (Accessibility)

Khi sử dụng useImperativeHandle để thao tác các phần tử DOM, hãy đảm bảo rằng bạn duy trì khả năng tiếp cận. Ví dụ, khi tập trung vào một phần tử theo chương trình, hãy xem xét đặt thuộc tính aria-live để thông báo cho trình đọc màn hình về sự thay đổi tiêu điểm.

5. Kiểm Thử Các Component Mệnh Lệnh

Kiểm thử các component sử dụng useImperativeHandle có thể khó khăn. Bạn có thể cần sử dụng các kỹ thuật giả lập (mocking) hoặc truy cập trực tiếp ref trong các bài kiểm thử của mình để xác minh rằng các phương thức được hiển thị hoạt động như mong đợi.

6. Cân Nhắc Về Quốc Tế Hóa (i18n)

Khi triển khai các component hướng người dùng sử dụng useImperativeHandle để thao tác văn bản hoặc hiển thị thông tin, hãy đảm bảo bạn cân nhắc đến quốc tế hóa. Ví dụ, khi triển khai bộ chọn ngày, hãy đảm bảo ngày được định dạng theo ngôn ngữ địa phương của người dùng. Tương tự, khi hiển thị thông báo lỗi, hãy sử dụng các thư viện i18n để cung cấp các thông báo đã được bản địa hóa.

7. Ảnh Hưởng Đến Hiệu Suất

Mặc dù useImperativeHandle tự thân không gây ra các nút thắt cổ chai về hiệu suất, nhưng các hành động được thực hiện thông qua các phương thức được hiển thị có thể có ảnh hưởng đến hiệu suất. Ví dụ, việc kích hoạt các hoạt ảnh phức tạp hoặc thực hiện các phép tính tốn kém bên trong các phương thức có thể ảnh hưởng đến khả năng phản hồi của ứng dụng của bạn. Hãy lập hồ sơ mã của bạn và tối ưu hóa tương ứng.

Các Giải Pháp Thay Thế cho useImperativeHandle

Trong nhiều trường hợp, bạn có thể hoàn toàn tránh sử dụng useImperativeHandle bằng cách áp dụng một phương pháp khai báo hơn. Dưới đây là một số lựa chọn thay thế:

• Props và State: Truyền dữ liệu và trình xử lý sự kiện xuống dưới dạng props cho component con và để component cha quản lý trạng thái.
• Context API: Sử dụng Context API để chia sẻ trạng thái và phương thức giữa các component mà không cần truyền prop (prop drilling).
• Sự kiện Tùy chỉnh: Phát đi các sự kiện tùy chỉnh từ component con và lắng nghe chúng trong component cha.

Kết Luận

useImperativeHandle là một công cụ có giá trị để tùy chỉnh refs và hiển thị các chức năng component cụ thể trong React. Bằng cách hiểu khả năng và hạn chế của nó, bạn có thể sử dụng hiệu quả nó để nâng cao các component của mình trong khi vẫn duy trì mức độ đóng gói và kiểm soát. Hãy nhớ giảm thiểu các tương tác mệnh lệnh, thiết kế cẩn thận các API của bạn và cân nhắc các yếu tố về khả năng tiếp cận và hiệu suất. Khám phá các phương pháp khai báo thay thế bất cứ khi nào có thể để tạo ra mã dễ bảo trì và kiểm thử hơn.

Hướng dẫn này đã cung cấp một cái nhìn tổng quan toàn diện về useImperativeHandle, các mẫu phổ biến của nó và những cân nhắc nâng cao. Bằng cách áp dụng các nguyên tắc này, bạn có thể khai thác toàn bộ tiềm năng của hook React mạnh mẽ này và xây dựng các giao diện người dùng mạnh mẽ và linh hoạt hơn.

Đọc Thêm

• Tài Liệu React về useImperativeHandle
• Tài Liệu React về Forwarding Refs