مرجع API React
مرجع API React یک راهنمای جامع برای تمامی توابع، Hooks و متدهای ری‌اکت (React) است که توسعه‌دهندگان را قادر می‌سازد تا اپلیکیشن‌های مدرن، مقیاس‌پذیر و SPA را با بهترین شیوه‌ها بسازند. این مرجع برای مدیریت components، state management، جریان داده‌ها و lifecycle کامپوننت‌ها اهمیت دارد و به توسعه‌دهندگان کمک می‌کند تا اپلیکیشن‌های قابل نگهداری و بهینه تولید کنند.
استفاده از مرجع API React در توسعه ری‌اکت ضروری است زیرا این امکان را می‌دهد که خطاهای رایجی مانند prop drilling، re-renderهای غیرضروری یا تغییر مستقیم state را جلوگیری کرد. توسعه‌دهندگان با استفاده از Hooks مانند useState، useEffect و useReducer می‌توانند state محلی را مدیریت کرده و side-effectها را کنترل کنند. در این مرجع نحوه ایجاد reusable components، مدیریت صحیح lifecycle و ادغام ری‌اکت با SPAهای مدرن آموزش داده شده است. مطالعه این مرجع باعث می‌شود توسعه‌دهندگان توانایی ساخت UI تعاملی، بهینه‌سازی عملکرد و پیاده‌سازی best practiceهای پیشرفته را در پروژه‌های واقعی داشته باشند.
مثال پایه
jsximport React, { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
const increment = () => setCount(prev => prev + 1);
const decrement = () => setCount(prev => prev - 1);
return ( <div> <h1>Counter: {count}</h1> <button onClick={increment}>افزایش</button> <button onClick={decrement}>کاهش</button> </div>
);
}
export default Counter;در مثال Counter بالا، useState برای مدیریت state محلی count استفاده شده است. تابع setCount با استفاده از مقدار قبلی state، state جدید را تولید می‌کند که باعث جلوگیری از mutation مستقیم می‌شود. توابع increment و decrement به رویدادهای onClick متصل هستند تا تعامل کاربر به صورت مستقیم state را تغییر دهد.
این مثال نشان می‌دهد که چگونه ری‌اکت هنگام تغییر state، کامپوننت را مجدداً render می‌کند تا UI همواره با داده‌ها همگام باشد. همچنین این روش، بهترین شیوه‌های مدیریت state محلی، جلوگیری از prop drilling و ایجاد کامپوننت‌های reusable را به تصویر می‌کشد. برای مبتدیان، این مثال کمک می‌کند تا تفاوت بین DOM manipulation سنتی و مدیریت خودکار re-renderها توسط ری‌اکت را درک کنند.
مثال کاربردی
jsximport React, { useState, useEffect } from 'react';
function TodoList() {
const [tasks, setTasks] = useState([]);
const [input, setInput] = useState('');
const addTask = () => {
if (input.trim() !== '') {
setTasks(prev => [...prev, input]);
setInput('');
}
};
useEffect(() => {
console.log('Updated tasks:', tasks);
}, [tasks]);
return ( <div> <h2>Todo List</h2>
<input
type="text"
value={input}
onChange={e => setInput(e.target.value)}
placeholder="افزودن وظیفه جدید"
/> <button onClick={addTask}>افزودن</button> <ul>
{tasks.map((task, index) => ( <li key={index}>{task}</li>
))} </ul> </div>
);
}
export default TodoList;Advanced ری‌اکت (React) Implementation
jsximport React, { useState, useEffect, useCallback } from 'react';
function OptimizedTodoList() {
const [tasks, setTasks] = useState([]);
const [input, setInput] = useState('');
const addTask = useCallback(() => {
if (input.trim() !== '') {
setTasks(prev => [...prev, input]);
setInput('');
}
}, [input]);
useEffect(() => {
console.log('Optimized tasks updated:', tasks);
}, [tasks]);
return ( <div> <h2>Optimized Todo List</h2>
<input
type="text"
value={input}
onChange={e => setInput(e.target.value)}
placeholder="افزودن وظیفه جدید"
/> <button onClick={addTask}>افزودن</button> <ul>
{tasks.map((task, index) => ( <li key={index}>{task}</li>
))} </ul> </div>
);
}
export default OptimizedTodoList;مثال OptimizedTodoList از useCallback برای جلوگیری از ایجاد توابع غیرضروری در هر render استفاده می‌کند که به کاهش re-renderهای غیرضروری کمک می‌کند. همچنین useEffect تغییرات tasks را مانیتور می‌کند. بهترین شیوه‌ها شامل ایجاد کامپوننت‌های modular و reusable، استفاده صحیح از Hooks، جلوگیری از prop drilling با Context API و بهینه‌سازی عملکرد است. از اشتباهات رایج می‌توان به تغییر مستقیم state، re-renderهای مکرر و استفاده نادرست از nested props اشاره کرد. ابزارهای مانند React DevTools برای debugging و مانیتورینگ performance توصیه می‌شوند و امنیت از طریق استفاده هوشمندانه از dangerouslySetInnerHTML و keys یکتا تضمین می‌شود.
📊 مرجع کامل
| ری‌اکت (React) Element/Method | Description | Syntax | Example | Notes |
|---|---|---|---|---|
| useState | مدیریت state کامپوننت | const [state, setState] = useState(initial) | const [count, setCount] = useState(0); | برای state ساده مناسب |
| useEffect | مدیریت side-effect و lifecycle | useEffect(() => {}, [dependencies]); | useEffect(() => { console.log(count); }, [count]); | پس از render اجرا می‌شود |
| useContext | دریافت مقدار context | const value = useContext(Context); | const theme = useContext(ThemeContext); | جلوگیری از prop drilling |
| useReducer | مدیریت state پیچیده | const [state, dispatch] = useReducer(reducer, initial) | const [state, dispatch] = useReducer(todoReducer, []); | برای منطق پیچیده |
| React.memo | بهینه‌سازی re-render | export default React.memo(Component); | export default React.memo(TaskItem); | فقط در صورت تغییر props re-render می‌شود |
| useCallback | memorize توابع | const memoizedFn = useCallback(fn, [dependencies]); | const addTask = useCallback(() => {}, [tasks]); | بهینه‌سازی props کامپوننت‌های فرزند |
| useRef | ساخت references | const ref = useRef(initial); | const inputRef = useRef(); | دسترسی به DOM یا مقادیر mutable |
| useLayoutEffect | اثر پیش از render | useLayoutEffect(() => {}, [dependencies]); | useLayoutEffect(() => {}, []); | سینکرون با DOM |
| createContext | ایجاد context | const Context = createContext(defaultValue); | const ThemeContext = createContext('light'); | برای state جهانی |
| forwardRef | انتقال ref به فرزند | const Component = forwardRef((props, ref) => {}); | const Input = forwardRef((props, ref) => <input ref={ref} />); | دسترسی به ref فرزند |
📊 Complete ری‌اکت (React) Properties Reference
| Property | Values | Default | Description | ری‌اکت (React) Support |
|---|---|---|---|---|
| className | string | '' | انتساب کلاس CSS | All versions |
| key | string | null | شناسه یکتا برای list items | All versions |
| ref | object | null | دسترسی به DOM یا component | 16.3+ |
| children | node | null | المان‌های فرزند کامپوننت | All versions |
| style | object | {} | استایل inline | All versions |
| dangerouslySetInnerHTML | object | null | درج HTML خام | All versions |
| defaultValue | string | '' | مقدار پیش‌فرض فرم | All versions |
| defaultChecked | boolean | false | حالت پیش‌فرض checkbox | All versions |
| onClick | function | null | رویداد کلیک | All versions |
| onChange | function | null | رویداد تغییر input | All versions |
پس از یادگیری مرجع API React، توسعه‌دهندگان مهارت‌های مدیریت state، جریان داده و lifecycle را کسب می‌کنند. مراحل بعدی شامل کاستوم هوک‌ها، کتابخانه‌های مدیریت state پیشرفته (Redux، Zustand) و بهینه‌سازی SPAهای بزرگ است. مطالعه مستندات رسمی و بهترین شیوه‌های جامعه، پیاده‌سازی React API در پروژه‌های واقعی را تضمین می‌کند.
🧠 دانش خود را بیازمایید
دانش خود را بیازمایید
خود را با این آزمون تعاملی به چالش بکشید و ببینید موضوع را چقدر خوب درک کرده‌اید
📝 دستورالعمل‌ها
- هر سوال را با دقت بخوانید
- بهترین پاسخ را برای هر سوال انتخاب کنید
- می‌توانید آزمون را هر چند بار که می‌خواهید تکرار کنید
- پیشرفت شما در بالا نمایش داده می‌شود