بهینه‌سازی و تست در React

بهینه‌سازی و تست در React

ساخت یک اپلیکیشن React فقط به نوشتن کد بسنده نمی‌کند؛ برای ارائه یک تجربه کاربری روان و قابل اعتماد، باید هم عملکرد (Performance) برنامه را بهینه کنیم و هم آن را تست کنیم تا از صحت عملکرد بخش‌های مختلف مطمئن شویم.

Performance Tuning با React DevTools

React DevTools یک ابزار رسمی از تیم React است که برای بررسی ساختار کامپوننت‌ها، وضعیت state و props، و همچنین اندازه‌گیری عملکرد استفاده می‌شود.

ویژگی Profiler:

با کمک این بخش می‌توانید مدت‌زمان رندر هر کامپوننت را بررسی کرده و کامپوننت‌هایی که باعث کندی برنامه می‌شوند را شناسایی کنید.

نصب:

روی مرورگر Chrome یا Firefox از بخش افزونه‌ها (Extensions) قابل نصب است.

جلوگیری از رندرهای اضافی

یکی از چالش‌های مهم در React، جلوگیری از رندرهای غیرضروری است که می‌تواند باعث کاهش عملکرد شود.

راه‌حل‌ها:

1. 
   

   استفاده از React.memo:

   
   

   const MyComponent = React.memo(function MyComponent({ data }) {
    return 
   {data}
   ;
   });

   
   

   این باعث می‌شود کامپوننت فقط زمانی رندر شود که props تغییر کند.

   
   


2. 
   

   استفاده از useCallback و useMemo:

useCallback برای بهینه‌سازی توابع

useMemo برای ذخیره نتایج محاسبات سنگین

1. 
   
   
   

   const expensiveValue = useMemo(() => heavyCalculation(value), [value]);
   
   

   
   


2. 
   

   بهینه‌سازی لیست‌ها با key مناسب:
   انتخاب کلیدهای یکتا باعث کاهش رندرهای غیرضروری می‌شود.

   
   

تست واحد با Jest و React Testing Library

تست واحد (Unit Test) روشی برای بررسی بخش‌های کوچک کد (مثل یک تابع یا کامپوننت) به صورت جداگانه است. در دنیای React، Jest و React Testing Library دو ابزار پرکاربرد هستند.

Jest

فریمورک رسمی تست برای جاوااسکریپت.

سریع، قدرتمند، و با پشتیبانی از mock و snapshot testing.

نمونه تست با Jest:

test('جمع درست محاسبه می‌شود', () => {
 expect(1 + 2).toBe(3);
});

React Testing Library

تمرکز روی تست رفتار کامپوننت از دید کاربر.

ترکیب عالی با Jest.

نمونه تست کامپوننت:

import { render, screen } from '@testing-library/react';
import App from './App';
test('نمایش متن سلام', () => {
 render();
 expect(screen.getByText(/سلام React/i)).toBeInTheDocument();
});

تست فرم و رندر کامپوننت

برای تست فرم‌ها، می‌توانیم تعاملات کاربر مثل تایپ در input یا کلیک روی دکمه را شبیه‌سازی کنیم:

import { render, fireEvent } from '@testing-library/react';
import LoginForm from './LoginForm';
test('ورود نام کاربری', () => {
 const { getByPlaceholderText } = render();
 const input = getByPlaceholderText('نام کاربری');
 fireEvent.change(input, { target: { value: 'Ali' } });
 expect(input.value).toBe('Ali');
});

این نوع تست‌ها باعث می‌شود مطمئن شویم فرم‌ها و رویدادها همان‌طور که انتظار می‌رود عمل می‌کنند.

جمع‌بندی

در این فصل یاد گرفتیم که:

چگونه با React DevTools عملکرد برنامه را بررسی کنیم.

با استفاده از React.memo، useCallback و useMemo رندرهای اضافی را کاهش دهیم.

از Jest و React Testing Library برای نوشتن تست واحد و تست تعاملات کاربری استفاده کنیم.