چیت‌شیت React
چیت‌شیت React در ری‌اکت (React) یک مرجع فشرده و کاربردی است که برای توسعه‌دهندگان حرفه‌ای ری‌اکت طراحی شده است تا مفاهیم کلیدی، متدها و بهترین شیوه‌ها را به سرعت مرور و به کار ببرند. این چیت‌شیت به ویژه برای توسعه برنامه‌های وب مدرن و Single Page Application (SPA)ها کاربرد دارد و به توسعه‌دهندگان کمک می‌کند تا برنامه‌های مقیاس‌پذیر، قابل نگهداری و با عملکرد بالا ایجاد کنند.
در ری‌اکت (React)، components بلوک‌های سازنده رابط کاربری هستند، state management برای مدیریت تعاملات پویا به کار می‌رود، data flow اطمینان می‌دهد که UI به شکل پیش‌بینی‌شده به‌روزرسانی شود و lifecycle componentها روند mount، update و unmount را مدیریت می‌کند. چیت‌شیت React این مفاهیم را خلاصه کرده و به توسعه‌دهندگان کمک می‌کند تا از prop drilling جلوگیری کنند، re-renderهای غیرضروری را کاهش دهند و components قابل استفاده مجدد بسازند.
با استفاده از این چیت‌شیت، کاربران یاد می‌گیرند که چگونه Hooks مانند useState و useEffect را به‌طور صحیح پیاده‌سازی کنند، جریان داده و lifecycle را مدیریت کنند و components بهینه و مقیاس‌پذیر طراحی نمایند. این مرجع یک ابزار عملی و قابل اجرا در پروژه‌های ری‌اکت است و به افزایش بهره‌وری و کیفیت کد کمک می‌کند.
مثال پایه
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 style={{ textAlign: 'center', marginTop: '50px' }}> <h2>کنتور ساده</h2> <p>تعداد فعلی: {count}</p> <button onClick={increment}>افزایش</button> <button onClick={decrement}>کاهش</button> </div>
);
}
export default Counter;در مثال بالا، component Counter نشان‌دهنده مفاهیم core در ری‌اکت (React) است. useState Hook برای مدیریت state محلی component استفاده شده است و تابع‌های increment و decrement state را به شکل امن به‌روزرسانی می‌کنند و از mutation مستقیم جلوگیری می‌کنند. این روش اطمینان می‌دهد که re-renderهای غیرضروری کاهش یافته و جریان داده‌ها به صورت یک‌طرفه حفظ شود.
این الگو مطابق با بهترین شیوه‌های ری‌اکت است و logic را جدا نگه می‌دارد و component را قابل استفاده مجدد می‌کند. به کمک این روش می‌توان components پیچیده‌تر ایجاد کرده و maintainable نگه داشت. همچنین، هر بار که state تغییر می‌کند، UI به‌طور خودکار به‌روزرسانی می‌شود و این موضوع نمایش پیش‌بینی‌شده داده‌ها را تضمین می‌کند.
مثال کاربردی
jsximport React, { useState, useEffect } from 'react';
function UserProfile({ userId }) {
const [user, setUser] = useState(null);
const [loading, setLoading] = useState(true);
useEffect(() => {
async function fetchUser() {
setLoading(true);
try {
const response = await fetch(`https://jsonplaceholder.typicode.com/users/${userId}`);
const data = await response.json();
setUser(data);
} catch (error) {
console.error('خطا در بارگذاری کاربر:', error);
} finally {
setLoading(false);
}
}
fetchUser();
}, [userId]);
if (loading) return <p>در حال بارگذاری...</p>;
if (!user) return <p>کاربر یافت نشد</p>;
return ( <div> <h2>پروفایل کاربر</h2> <p>نام: {user.name}</p> <p>ایمیل: {user.email}</p> </div>
);
}
export default UserProfile;Advanced ری‌اکت (React) Implementation
jsximport React, { useState, useEffect, useCallback } from 'react';
function TodoApp() {
const [todos, setTodos] = useState([]);
const [task, setTask] = useState('');
const addTodo = useCallback(() => {
if (task.trim() === '') return;
setTodos(prev => [...prev, { id: Date.now(), text: task }]);
setTask('');
}, [task]);
const removeTodo = useCallback((id) => {
setTodos(prev => prev.filter(todo => todo.id !== id));
}, []);
useEffect(() => {
console.log('Todos updated:', todos);
}, [todos]);
return ( <div> <h2>برنامه Todo</h2>
<input
type="text"
value={task}
onChange={(e) => setTask(e.target.value)}
placeholder="افزودن کار جدید"
/> <button onClick={addTodo}>افزودن</button> <ul>
{todos.map(todo => ( <li key={todo.id}>
{todo.text} <button onClick={() => removeTodo(todo.id)}>حذف</button> </li>
))} </ul> </div>
);
}
export default TodoApp;بهترین شیوه‌ها و اشتباهات رایج در ری‌اکت شامل ایجاد components ماژولار و reusable، مدیریت state با استفاده از hooks و حفظ جریان داده‌ها به صورت یک‌طرفه است. اشتباهات رایج شامل prop drilling، تغییر مستقیم state و re-renderهای غیرضروری هستند.
برای اشکال‌زدایی می‌توان از React DevTools استفاده کرد که امکان مشاهده hierarchy، تغییرات state و عملکرد rendering را فراهم می‌کند. برای بهینه‌سازی عملکرد، React.memo، useMemo و useCallback توصیه می‌شوند. از لحاظ امنیتی، اعتبارسنجی داده‌ها قبل از render یا update state اهمیت دارد. رعایت این اصول باعث ایجاد برنامه‌های performative، maintainable و امن می‌شود و چیت‌شیت React یک مرجع عملی و سریع برای یادگیری و اجرا ارائه می‌دهد.
📊 مرجع کامل
| ری‌اکت (React) Element/Method | Description | Syntax | Example | Notes |
|---|---|---|---|---|
| Component | واحدهای قابل استفاده مجدد UI | function MyComponent() {} | function MyComponent() { return <div>Hello</div>; } | بلوک اصلی ساخت UI |
| useState | مدیریت state محلی | const [state, setState] = useState(initial); | const [count, setCount] = useState(0); | جلوگیری از prop drilling |
| useEffect | Side effects و lifecycle | useEffect(() => {}, [deps]); | useEffect(() => { console.log(count); }, [count]); | مدیریت lifecycle |
| useReducer | مدیریت state پیچیده | const [state, dispatch] = useReducer(reducer, initial); | const [state, dispatch] = useReducer(reducer, {}); | جایگزین useState |
| props | ارسال داده به component | <Component propName={value} /> | <Greeting name="Anna" /> | فقط خواندنی |
| context | اشتراک داده سراسری | React.createContext() | const ThemeContext = React.createContext(); | جلوگیری از prop drilling |
| React.memo | بهینه‌سازی عملکرد | export default React.memo(Component); | export default React.memo(MyComponent); | جلوگیری از re-renderهای غیرضروری |
| useCallback | حافظه‌داری توابع | const memoFn = useCallback(fn, [deps]); | const add = useCallback(() => {}, []); | جلوگیری از تعریف مجدد |
| useMemo | حافظه‌داری مقادیر | const memoValue = useMemo(() => compute(), [deps]); | const total = useMemo(() => calcTotal(), [items]); | بهینه‌سازی عملکرد |
| key | شناسه منحصر به فرد برای list | <li key={id}>Item</li> | <li key={todo.id}>{todo.text}</li> | list rendering |
| event handling | مدیریت رویدادها | onClick, onChange | <button onClick={handleClick}>Click</button> | از handlerهای جداگانه استفاده کنید |
| refs | دسترسی به DOM یا component | const ref = useRef(); | const inputRef = useRef(); | دسترسی مستقیم به DOM |
| lazy | بارگذاری تنبل component | React.lazy(() => import('./Component')) | const LazyComp = React.lazy(() => import('./Comp')); | کاهش حجم bundle |
| Suspense | Fallback برای lazy components | <Suspense fallback={<Loading />}><LazyComp /></Suspense> | <Suspense fallback={<p>Loading...</p>}><LazyComp /></Suspense> | استفاده با lazy |
| forwardRef | انتقال ref | React.forwardRef((props, ref) => {}) | const Input = React.forwardRef((props, ref) => <input ref={ref} />) | دسترسی خارجی |
| error boundaries | مدیریت خطا | class ErrorBoundary extends React.Component {} | class ErrorBoundary extends React.Component { render() { return this.props.children; }} | گرفتن خطاها |
📊 Complete ری‌اکت (React) Properties Reference
| Property | Values | Default | Description | ری‌اکت (React) Support |
|---|---|---|---|---|
| useState | any | null | مدیریت state محلی | v16.8+ |
| useEffect | function | null | Side effects و lifecycle | v16.8+ |
| useReducer | function | null | مدیریت state پیچیده | v16.8+ |
| props | any | {} | ارسال داده به component | v0.14+ |
| context | object | null | اشتراک داده سراسری | v16.3+ |
| key | string/number | null | شناسه منحصر به فرد list | v0.14+ |
| ref | object | null | دسترسی به DOM یا component | v16.3+ |
| memo | HOC | null | بهینه‌سازی عملکرد | v16.6+ |
| lazy | function | null | بارگذاری تنبل | v16.6+ |
| Suspense | component | null | Fallback برای lazy components | v16.6+ |
| forwardRef | function | null | انتقال ref | v16.3+ |
| ErrorBoundary | class | null | مدیریت خطا در component | v16+ |
خلاصه و گام‌های بعدی:
چیت‌شیت React مرجع عملی و سریع برای ایجاد برنامه‌های maintainable و performative در ری‌اکت (React) فراهم می‌کند. نکات کلیدی شامل components ماژولار و reusable، مدیریت امن state، جریان داده یک‌طرفه و مدیریت lifecycle است. با به‌کارگیری این تکنیک‌ها می‌توان SPAهای مقیاس‌پذیر و با کیفیت بالا ساخت.
گام بعدی شامل یادگیری مدیریت state سراسری با Redux یا Zustand، بهینه‌سازی عملکرد با React Profiler و توسعه SPAهای پیچیده با React Router و Axios است. استفاده عملی از مثال‌های چیت‌شیت در پروژه‌های واقعی باعث تثبیت دانش و تجربه می‌شود و منابع رسمی و آموزش‌های پیشرفته به عنوان راهنمای یادگیری مستمر پیشنهاد می‌شوند.
🧠 دانش خود را بیازمایید
دانش خود را بیازمایید
خود را با این آزمون تعاملی به چالش بکشید و ببینید موضوع را چقدر خوب درک کرده‌اید
📝 دستورالعمل‌ها
- هر سوال را با دقت بخوانید
- بهترین پاسخ را برای هر سوال انتخاب کنید
- می‌توانید آزمون را هر چند بار که می‌خواهید تکرار کنید
- پیشرفت شما در بالا نمایش داده می‌شود