نحوه ساخت هوک در ریکت
هوک‌ها (Hooks) در React اجزایی هستند که به شما اجازه می‌دهند وضعیت و منطق برنامه را در برنامه React خود ذخیره کنید و مجدداً استفاده کنید. شما می‌توانید هوک‌ها را برای به اشتراک گذاشتن منطق بین اجزای مختلف React، همچنین استفاده از وضعیت‌های مختلف برای رسم UI متفاوت برای کاربران استفاده کنید.
import { useState } from ‘react’;
function useClickCounter() {
const [clicks, setClicks] = useState(0);
function handleClick() {
setClicks(clicks + 1);
}
return [clicks, handleClick];
}
در این مثال، تابع useClickCounter() یک هوک با نام “clickCounter” ایجاد می‌کند که مقدار تعداد کلیک‌ها را در یک state به نام “clicks” ذخیره می‌کند و همچنین یک تابع به نام “handleClick” ایجاد می‌کند که وظیفه دارد تعداد کلیک‌ها را افزایش دهد. در نهایت، تابع useClickCounter() آرایه‌ای شامل تعداد کلیک‌ها و تابع handleClick() را برمی‌گرداند.
برای استفاده از هوک “clickCounter” در یک کامپوننت React، می‌توانید از آن به این صورت استفاده کنید:
import React from ‘react’;
import useClickCounter from ‘./useClickCounter’;
function MyComponent() {
const [clicks, handleClick] = useClickCounter();
return (
<div>
<p>Number of clicks: {clicks}</p>
<button onClick={handleClick}>Click me!</button>
</div>
);
}
در این مثال، هوک “clickCounter” در فایل “useClickCounter.js” ساخته شده است
دیدگاهتان را بنویسید