تسلط “UseImperativeHandle” در React: یک راهنمای گام به گام برای متخصصان

تسلط useImperativeHandle در React: یک راهنمای گام به گام برای متخصصان

در توسعه React مدرن ، ما اغلب به دنبال راه هایی برای مدیریت منطق مؤلفه با ظرافت و بدون افشای داخلی غیر ضروری هستیم. یک ابزار قدرتمند در آرسنال پیشرفته React این است useImperativeHandle قلاب این قلاب به مؤلفه های عملکردی اجازه می دهد تا روشهای ضروری را در مورد اجزای والدین در معرض دید خود قرار دهند.

در این مقاله ، قلاب را با قدم به قدم با یک تقسیم خواهیم کرد مثال در دنیای واقعی با الهام از منطق UI تعاملی: یک مؤلفه ورودی سفارشی که ارائه می دهد .focus() روش به والدین خود. شما می دانید نه تنها این قلاب چه کاری انجام می دهد ، بلکه چرابا کیوت چگونه برای استفاده از آن مانند یک استاد React.

چیست useImperativeHandle؟

useImperativeHandle یک قلاب React است که به شما امکان می دهد مقدار نمونه ای را که هنگام استفاده در معرض آن قرار می گیرد ، سفارشی کنید ref روی یک مؤلفه از آن در رابطه با استفاده می شود forwardRefبشر

const MyComponent = forwardRef((props, ref) => {
  useImperativeHandle(ref, () => ({
    customMethod: () => {
      console.log('Custom method called!');
    }
  }));
  return <div>Hellodiv>;
});

این به والدین اجازه می دهد تا تماس بگیرند customMethod() به طور مستقیم با استفاده از refبشر

چرا از آن استفاده می کنیم؟

به طور پیش فرض ، ref گره DOM زیرین را برمی گرداند. اما اگر می خواهید عملکرد خاص را افشا کنید ، چه می کنید؟ useImperativeHandle کنترل دقیق را در مورد آنچه در معرض دید قرار می دهد ، به شما می دهد ، و اجرای مؤلفه خود را محصور می کنید.

موارد استفاده

• روش های تمرکز ، تاری یا پیمایش را روی اجزای ورودی سفارشی
• انیمیشن ها یا انتقال کنترل شده توسط والدین
• تنظیم مجدد یا ارسال روش ها در اجزای فرم

مثال در دنیای واقعی: ورودی سفارشی با روش فوکوس

بیایید یک قابل استفاده مجدد بسازیم TextInput مؤلفه ای که به والدین اجازه می دهد تماس بگیرد .focus() برنامه ای

1. مؤلفه را ایجاد کنید

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

interface TextInputHandle {
  focus: () => void;
}

const TextInput = forwardRef<TextInputHandle>((props, ref) => {
  const inputRef = useRef<HTMLInputElement>(null);

  useImperativeHandle(ref, () => ({
    focus() {
      inputRef.current?.focus();
    }
  }));

  return <input ref={inputRef} type="text" className="custom-input" />;
});

2. از آن در والدین استفاده کنید

export const App = () => {
  const inputRef = useRef<TextInputHandle>(null);

  return (
    <div>
      <h3>Imperative Handle Demoh3>
      <TextInput ref={inputRef} />
      <button onClick={() => inputRef.current?.focus()}>
        Focus Input
      button>
    div>
  );
};

وقتی روی دکمه کلیک می کنید ، TextInput متمرکز می شود

مفاهیم کلیدی

جایزه جایزه

سعی کنید TextInput شامل:

• .clear() روش خالی کردن ورودی
• .getValue() روش بازگشت مقدار ورودی فعلی

مثال:

useImperativeHandle(ref, () => ({
  focus: () => inputRef.current?.focus(),
  clear: () => inputRef.current && (inputRef.current.value = ''),
  getValue: () => inputRef.current?.value
}));

پایان

در useImperativeHandle هوک یک تکنیک پیشرفته اما قدرتمند در React است. این کنترل ریز دانه بر تعامل مؤلفه به شما امکان می دهد و به شما امکان می دهد API های تمیز و قابل استفاده مجدد را بین اجزای بدون به خطر انداختن محاصره در معرض دید قرار دهید.

درک و تسلط useImperativeHandle یک گام کلیدی برای تبدیل شدن به یک متخصص واقعی React است.

#REACT #typescript #hooks #ref #frontend #architecture