7 بهترین روش ضروری React برای کد کارآمد در سال 2024

در دنیای پر سرعت توسعه وب، ReactJS به عنوان یک کتابخانه پیشرو برای ایجاد رابط های کاربری پویا و پاسخگو ظاهر شده است. جای تعجب نیست که شرکت های توسعه برنامه ReactJS تقاضای بالایی دارند. React همچنان در سال 2024 بر چشم انداز توسعه front-end تسلط دارد. چه یک تازه کار React باشید یا یک حرفه ای با تجربه، تسلط بر این هفت روش برتر، کارایی برنامه نویسی و عملکرد برنامه شما را افزایش می دهد. بیایید در این مقاله از آنوفل با هم به 7 روش ضرروی React برای کارآمد کردن اپلیکیشن ری اکت نگاهی دقیق و عملی خواهیم داشت.

1. ساختار کامپوننت های هوشمند: کلید قابلیت استفاده مجدد

تقسیم کردن رابط کاربری خود به کامپوننت های کوچک و قابل استفاده مجدد فقط مربوط به کدهای تمیز نیست، بلکه یک تغییر دهنده بازی برای بهره وری و قابلیت نگهداری است.

یک کامپوننت برای پروژه خود ایجاد کنید. همانند کد زیر که باعث می شود در چندین جای مختلف استفاده کنید و در صورت تغییر UI نیز برای همه آن ها تغییر کند.

const Button = ({ label, onClick }) => (
  <button onClick={onClick}>{label}</button>
);

const App = () => (
  <div>
    <Button label="Click Me" onClick={() => alert('Hello!')} />
    <Button label="Submit" onClick={() => console.log('Form submitted')} />
  </div>
);

2. مدیریت استیت: محلی در مقابل گلوبال

مدیریت استیت موثر برای عملکرد و مقیاس پذیری برنامه بسیار مهم است. این قانون طلایی است:
از استیت محلی (useState) برای داده های خاص کامپوننت استفاده کنید
مدیریت استیت گلوبال (Redux Toolkit، Zustand یا Recoil) را برای داده های به اشتراک گذاشته شده در چندین کامپوننت انتخاب کنید.

در کد زیر یک مثال از استیت محلی را می بیینید:

import { useState } from 'react';

const Counter = () => {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
};

برای آشنایی با 4 اشتباه هوک useState که باید از آن اجتناب کنید.

3. برنامه خود را با بارگذاری تنبل تسریع تر کنید

بارگذاری تنبل (Lazy Loading) تکنیکی است که به شما اجازه می‌دهد تا برخی از بخش‌های برنامه خود را تنها زمانی بارگذاری کنید که به آن‌ها نیاز است. این تکنیک زمان بارگذاری اولیه برنامه را کاهش می‌دهد و تجربه کاربری بهتری را فراهم می‌کند.

برای این کار باید از lazy و Suspense در React استفاده کنید. React به شما امکان می‌دهد تا با استفاده از lazy و Suspense کامپوننت‌های خود را به صورت تنبل بارگذاری کنید.

در این مثال، ما یک کامپوننت تنبل (LazyComponent) را بارگذاری می‌کنیم که فقط زمانی بارگذاری می‌شود که به آن نیاز داریم.

import { Suspense, lazy } from 'react';

const LazyComponent = lazy(() => import('./LazyComponent'));

const App = () => (
  <div>
    <h1>My Blazing Fast App</h1>
    <Suspense fallback={<div>Loading...</div>}>
      <LazyComponent />
    </Suspense>
  </div>
);

توضیح کد بالا:

lazy: این تابع کامپوننتی را که باید به صورت تنبل بارگذاری شود، مشخص می‌کند.

lazy یک تابع است که یک تابع بازگشتی می‌گیرد که دینامیک کامپوننت را از طریق ()import بارگذاری می‌کند. 

مثال: ;const LazyComponent = lazy(() => import('./LazyComponent'))

Suspense: این کامپوننت برای نمایش یک fallback (جایگزین) تا زمانی که کامپوننت تنبل بارگذاری شود، استفاده می‌شود.

Suspense یک کامپوننت است که یک fallback دریافت می‌کند. fallback چیزی است که تا زمانی که کامپوننت اصلی بارگذاری شود، نمایش داده می‌شود.
مثال: <Suspense fallback={<div>Loading...</div>}>

برای بهبود تجربه کاربری با Placeholder های پیشرفته به جای نمایش یک متن ساده، می‌توانید یک انیمیشن یا اسکلتون (Skeleton) را به عنوان fallback استفاده کنید تا تجربه کاربری بهتری فراهم کنید.

مثال استفاده :

import React, { Suspense, lazy } from 'react';

const LazyComponent = lazy(() => import('./LazyComponent'));

const LoadingSkeleton = () => (
  <div className="skeleton">
    <div className="skeleton-item"></div>
    <div className="skeleton-item"></div>
    <div className="skeleton-item"></div>
  </div>
);

const App = () => (
  <div>
    <h1>My Blazing Fast App</h1>
    <Suspense fallback={<LoadingSkeleton />}>
      <LazyComponent />
    </Suspense>
  </div>
);

export default App;

همچنین در React 18، شما می‌توانید با استفاده از startTransition تجربه کاربری را بهتر مدیریت کنید. startTransition به شما این امکان را می‌دهد که رندرهایی که ممکن است زمان‌بر باشند را بهینه کنید. برای آشنایی با هوک useTransition این مقاله را بررسی کنید.

مثال :

import React, { useState, startTransition, Suspense, lazy } from 'react';

const LazyComponent = lazy(() => import('./LazyComponent'));

const App = () => {
  const [showComponent, setShowComponent] = useState(false);

  const handleClick = () => {
    startTransition(() => {
      setShowComponent(true);
    });
  };

  return (
    <div>
      <h1>My Blazing Fast App</h1>
      <button onClick={handleClick}>Load Component</button>
      {showComponent && (
        <Suspense fallback={<div>Loading...</div>}>
          <LazyComponent />
        </Suspense>
      )}
    </div>
  );
};

export default App;

جهت بررسی نحوه مقایس بندی ساختار یک پروژه React این مقاله را بررسی فرمایید.

4. Memoization: تقویت کننده عملکرد شما

Memoization یک تکنیک بهینه‌سازی است که به شما کمک می‌کند تا از انجام محاسبات غیرضروری جلوگیری کنید. در React، از React.memo و useMemo برای بهینه‌سازی رندر و جلوگیری از محاسبات غیرضروری استفاده می‌شود.

استفاده از useMemo هوک useMemo به شما امکان می‌دهد تا نتیجه یک محاسبه را به خاطر بسپارید و تنها زمانی که وابستگی‌های آن تغییر می‌کنند، دوباره محاسبه شود. این ویژگی به ویژه در مورد محاسبات سنگین یا کامپوننت هایی که نیاز به محاسبات پیچیده دارند، مفید است. برای آشنایی با چه زمانی نباید از هوک useMemo استفاده کرد این مقاله بررسی کنید.

مثال استفاده :
فرض کنید یک تابع محاسباتی سنگین دارید که باید مقدار آن تنها زمانی محاسبه شود که داده‌های ورودی تغییر کنند.

import { useState, useMemo } from 'react';

const ExpensiveComponent = React.memo(({ data }) => {
  console.log('ExpensiveComponent rendered');
  return <div>{data}</div>;
});

const App = () => {
  const [count, setCount] = useState(0);
  const data = useMemo(() => `Count is: ${count}`, [count]);

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>Increment</button>
      <ExpensiveComponent data={data} />
    </div>
  );
};

برای آشنایی با تفاوت بین useCallback و useMemo این مقاله جذاب را مطالعه کنید.

آینده با React 19 و React Compiler با آمدن React 19 و معرفی React Compiler، نیاز به useMemo و دیگر تکنیک‌های بهینه‌سازی دستی نیست. React Compiler به طور خودکار کد شما را برای بهینه‌سازی رندر بهینه می‌کند، به طوری که نیازی به استفاده دستی از useMemo نخواهد بود. همچنین برای آشنایی با تفاوت های بین ری اکت 19 و 18 نیز اینجا را بررسی فرمایید.

5. برنامه خود را با مرزهای خطا بهتر کنید

مرزهای خطا در React به شما این امکان را می‌دهند که خطاهای غیرمنتظره را مدیریت کنید و از خرابی کامل برنامه جلوگیری کنید. این امر باعث می‌شود تجربه کاربری روان‌تری برای کاربران فراهم شود.

کد زیر یک نمونه از مرز خطا است:

class ErrorBoundary extends React.Component {
  state = { hasError: false };

  // این متد در صورت بروز خطا، وضعیت کامپوننت را به روزرسانی می‌کند
  static getDerivedStateFromError(error) {
    return { hasError: true };
  }

  // این متد جزئیات خطا را لاگ می‌کند
  componentDidCatch(error, info) {
    console.error('Error caught by boundary:', error, info);
  }

  render() {
    if (this.state.hasError) {
      // اگر خطایی رخ داده باشد، این پیام نمایش داده می‌شود
      return <h1>Oops! Something went wrong. We're on it!</h1>;
    }

    // در غیر این صورت، کامپوننت‌های فرزند نمایش داده می‌شوند
    return this.props.children;
  }
}

getDerivedStateFromError: وقتی یک خطا در فرزندان این کامپوننت رخ می‌دهد، این متد وضعیت کامپوننت را به‌روز می‌کند تا خطا نمایش داده شود.
componentDidCatch: جزئیات خطا را لاگ می‌کند که می‌تواند برای دیباگ و پیگیری خطاها مفید باشد.
render: اگر خطا رخ داده باشد، یک پیام خطا نمایش داده می‌شود، در غیر این صورت کامپوننت‌های فرزند نمایش داده می‌شوند.

6. دسترسی: ایجاد برای همه

دسترسی به برنامه‌ها برای همه کاربران از اهمیت بالایی برخوردار است. با استفاده از HTML معنایی یا همان semantic HTML، ویژگی‌های ARIA و پشتیبانی از ناوبری صفحه‌کلید، می‌توانید برنامه‌های خود را در دسترس‌تر کنید.

نمونه کد زیر یک دکمه دسترسی‌پذیر را نشان می‌دهد:

const AccessibleButton = ({ onClick, children }) => (
  <button 
    onClick={onClick}
    aria-label={typeof children === 'string' ? children : 'Interactive button'}
  >
    {children}
  </button>
);

aria-label: این ویژگی یک توضیح متنی برای دکمه فراهم می‌کند که توسط تکنولوژی‌های کمکی (مثل صفحه‌خوان‌ها) خوانده می‌شود.

7. تقسیم کد و بهینه سازی: عملکرد بالا

از ابزارهای ساخت مدرن مانند Vite یا Next.js برای تقسیم کد و بهینه سازی بی دردسر استفاده کنید. این ابزارها بهبودهای عملکردی خارج از جعبه را ارائه می دهند، و پیکربندی دستی Webpack را برای اکثر پروژه ها به گذشته تبدیل می کنند.

اگر از Create React App استفاده می کنید، برای بهبود زمان ساخت و بهینه سازی به Vite مهاجرت کنید.

استفاده از Vite:
Vite یک ابزار ساخت سریع برای پروژه‌های وب مدرن است که با پیکربندی ساده و عملکرد بالا شناخته می‌شود.

# نصب Vite
npm create vite@latest my-app
cd my-app
npm install
npm run dev

استفاده از Next.js:
Next.js یک فریم‌ورک React است که امکاناتی مانند رندر سمت سرور، تقسیم کد خودکار، و بهینه‌سازی عملکرد را ارائه می‌دهد.

# نصب Next.js
npx create-next-app@latest my-next-app
cd my-next-app
npm run dev

نتیجه

با اجرای این هفت روش برتر، برنامه‌های React کارآمدتر، قابل نگهداری و با کارایی بالا را می‌نویسید. به یاد داشته باشید، توسعه عالی React یک سفر مداوم است، کنجکاو بمانید و مهارت های خود را اصلاح کنید!