هوک‌های ری‌اکت (React Hooks)
هوک‌های ری‌اکت (React Hooks)
هوک‌ها توابعی هستند که در نسخه 16.8 ری‌اکت معرفی شدند و به توسعه‌دهندگان امکان می‌دهند بدون نیاز به تعریف کلاس، از قابلیت‌هایی مانند مدیریت state و سایر ویژگی‌های ری‌اکت استفاده کنند. این هوک‌ها منطق کامپوننت را ساده کرده و باعث بازاستفاده و نگهداری بهتر کد می‌شوند.
هوک‌های کلیدی
۱. useState
این هوک برای افزودن state به کامپوننت‌های تابعی استفاده می‌شود.
import React, { useState } from ‘react’;
function Counter() {
const [count, setCount] = useState(0);
return (
<div>
<p>شما {count} بار کلیک کرده‌اید</p>
<button onClick={() => setCount(count + 1)}>کلیک کنید</button>
</div>
);
}
۲. useEffect
این هوک برای مدیریت اثرات جانبی (مانند گرفتن داده‌ها از سرور، یا تغییر دستی DOM) استفاده می‌شود.
import React, { useState, useEffect } from ‘react’;
function Example() {
const [count, setCount] = useState(0);
useEffect(() => {
document.title = `شما ${count} بار کلیک کرده‌اید`;
}, [count]);
return (
<div>
<p>شما {count} بار کلیک کرده‌اید</p>
<button onClick={() => setCount(count + 1)}>کلیک کنید</button>
</div>
);
}
۳. useContext
این هوک استفاده از مقدار Context را در کامپوننت‌های تابعی ساده‌تر می‌کند.
import React, { useContext } from ‘react’;
const ThemeContext = React.createContext(‘light’);
function ThemedButton() {
const theme = useContext(ThemeContext);
return <button className={theme}>من با استفاده از تم استایل گرفته‌ام!</button>;
}
۴. useReducer
هوکی برای مدیریت state پیچیده‌تر که عملکردی مشابه Redux دارد.
import React, { useReducer } from ‘react’;
function reducer(state, action) {
switch (action.type) {
case ‘increment’:
return { count: state.count + 1 };
case ‘decrement’:
return { count: state.count – 1 };
default:
throw new Error();
}
}
function Counter() {
const [state, dispatch] = useReducer(reducer, { count: 0 });
return (
<div>
<p>تعداد: {state.count}</p>
<button onClick={() => dispatch({ type: ‘increment’ })}>+</button>
<button onClick={() => dispatch({ type: ‘decrement’ })}>-</button>
</div>
);
}
۵. useRef
این هوک برای ارجاع به المان‌های DOM یا ذخیره مقادیر متغیر بدون ایجاد رندر مجدد استفاده می‌شود.
import React, { useRef } from ‘react’;
function FocusInput() {
const inputRef = useRef(null);
const focusInput = () => {
inputRef.current.focus();
};
return (
<div>
<input ref={inputRef} type=“text” />
<button onClick={focusInput}>روی ورودی فوکوس کن</button>
</div>
);
}
دیدگاهتان را بنویسید