5 ترفند واکنش برای بهبود کیفیت و عملکرد کد

Summarize this content to 400 words in Persian Lang
React یک کتابخانه قدرتمند جاوا اسکریپت برای ساخت رابط های کاربری است و تنها با چند ترفند می توانید کدهای تمیزتر، کارآمدتر و قابل نگهداری بنویسید. در این مقاله، پنج ترفند ضروری React را بررسی می‌کنیم که به شما کمک می‌کند کدهای کارآمدتر و خواناتری بنویسید.

1. از اپراتورهای سه تایی به جای AND استفاده کنید (&&) اپراتورهایی برای رندر عناصر

در React، رندر مشروط کامپوننت ها یا عناصر بر اساس شرایط خاص معمول است. با این حال، با استفاده از && عملگر برای رندر شرطی زمانی که عبارت ارزیابی شده به یک مقدار نادرست منجر شود می تواند مشکل باشد (مثلا false، null، undefined، 0، یا ”). برای جلوگیری از رفتار رندر ناخواسته، استفاده از عملگر سه تایی را ترجیح دهید.

مثال از && رفتار:

با استفاده از && در رندر شرطی:

{0 && <h1>Hello world 5h1>}
{0 ? <h1>Hello world 6h1> : null}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

مثال اول ({0 && }) ارائه خواهد شد 0 در UI زیرا 0 یک مقدار نادرست در جاوا اسکریپت است و React آن را به این صورت تفسیر می کند false. با این حال، React به جای رندر کردن چیزی، مقدار نادرست (0) خودش.
مثال دوم ({0 ? : null}) ارائه خواهد شد هیچ چیز. از آنجایی که شرط است 0 (که نادرست است)، اپراتور سه تایی را ارزیابی می کند nullو React هیچ چیزی را ارائه نخواهد کرد.

رویکرد بهتر با اپراتور سه‌گانه:

به جای تکیه بر && اپراتور، می توانید از یک عملگر سه تایی استفاده کنید تا اطمینان حاصل کنید که محتوای بازگشتی صحیح را ارائه می کنید، به خصوص زمانی که شرط نادرست است.

{0 ? <h1>Hello world 5h1> : null}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

در این صورت، اگر شرط نادرست باشد (0)، React رندر خواهد شد null، که منجر به ارائه هیچ چیزی نمی شود و رفتار قابل پیش بینی و مورد نظرتری را ارائه می دهد.

2. Lazy Initializer با useState

واکنش نشان دهید useState hook می تواند تابعی را به عنوان مقدار اولیه خود بگیرد و به شما این امکان را می دهد که حالت را با تنبلی مقداردهی اولیه کنید. این به ویژه زمانی مفید است که محاسبه حالت اولیه گران باشد یا زمانی که به محاسباتی بستگی دارد که فقط یک بار اجرا می شود.

چرا از Lazy Initialization استفاده کنیم؟

بهبود عملکرد: اگر حالت اولیه شامل محاسبات گران قیمت یا واکشی داده باشد، مقداردهی اولیه تنبل به تعویق این هزینه کمک می کند تا زمانی که واقعاً مورد نیاز باشد.

اجتناب از محاسبات غیر ضروری: تابعی که به آن پاس می دهید useState زیرا مقدار اولیه فقط یک بار در طول نصب کامپوننت اجرا می شود و در رندرهای بعدی مجدداً محاسبه نمی شود.

مثال:

import React, { useState } from ‘react’;

const ExpensiveComponent: React.FC = () => {
const [count, setCount] = useState(() => {
// Expensive computation
console.log(‘Computing initial state’);
return Math.random(); // For example, generate a random number
});

return <div>Initial Random Value: {count}div>;
};

export default ExpensiveComponent;

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

در این مثال:

useState(() => Math.random()) تابع را فقط یک بار در رندر اولیه فراخوانی می کند.
این تضمین می‌کند که تولید اعداد تصادفی فقط یک بار اتفاق می‌افتد و در صورتی که محاسبه گران بود، عملکرد را بهبود می‌بخشد.

3. از اجزای بار تنبل برای بهبود عملکرد استفاده کنید

واکنش نشان دهید React.lazy() و Suspense ابزارهای عالی برای بارگذاری تنبل مؤلفه ها هستند که به تقسیم جاوا اسکریپت شما به بسته های کوچکتر کمک می کند و آنها را فقط در صورت نیاز بارگیری می کند. این به طور قابل توجهی زمان بارگذاری اولیه را کاهش می دهد و عملکرد برنامه شما را بهبود می بخشد.

مثال:

import React, { Suspense } from ‘react’;

const LazyComponent = React.lazy(() => import(‘./LazyComponent’));

function App() {
return (
<Suspense fallback={<div>Loading…div>}>
<LazyComponent />
Suspense>
);
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

در این مثال:

React.lazy() به شما امکان می دهد به صورت پویا وارد کنید LazyComponent.
را Suspense کامپوننت برای نمایش وضعیت بارگذاری استفاده می شود تا زمانی که کامپوننت با بار تنبلی به طور کامل رندر شود.

با استفاده از بارگذاری تنبل، برنامه شما فقط مؤلفه‌های لازم برای رندر اولیه را بارگیری می‌کند و سایرین را به‌صورت درخواستی واکشی می‌کند و عملکرد را به‌ویژه در برنامه‌های بزرگ افزایش می‌دهد.

4. استفاده از Chaining اختیاری در جاوا اسکریپت

اگر با جاوا اسکریپت کار می کنید، زنجیره اختیاری (?.) هنگام دسترسی به خصوصیات عمیق تو در تو روی اشیا نجات دهنده است. از خطاهایی که هنگام تلاش برای دسترسی به ویژگی های رخ می دهد جلوگیری می کند undefined یا null. زنجیره اختیاری در جاوا اسکریپت مدرن موجود است و به شما امکان می دهد بدون نیاز به بررسی دستی به خصوصیات دسترسی داشته باشید. null یا undefined.

مثال:

function MyComponent({ data }) {
const address = data?.info?.address ?? “Address not available”;
return <div>{address}div>;
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

در این مثال:

data?.info?.address با خیال راحت به address اموال بدون پرتاب خطا اگر data یا info است undefined یا null.
را ?? اپراتور یک مقدار پیش فرض if را ارائه می دهد address است undefined.

بدون زنجیره اختیاری، باید به صورت دستی هر سطح را بررسی کنید، که می تواند به سرعت منجر به کدهای درهم ریخته و خواناتر شود. زنجیربندی اختیاری آن را تمیز و بدون خطا نگه می دارد.

5. استفاده کنید useRef برای فرم هایی برای جلوگیری از رندر مجدد

در React، زمانی که با فرم ها کار می کنید و نیازی به رندر مجدد کامپوننت در هر تغییر ورودی ندارید، بهتر است از آن استفاده کنید. useRef به جای useState. useRef مقدار فیلد ورودی را مستقیماً ذخیره می‌کند و هنگامی که مقدار تغییر می‌کند، رندر مجدد را راه‌اندازی نمی‌کند و عملکرد آن را برای فرم‌های بزرگ بیشتر می‌کند.

مثال:

import React, { useRef } from ‘react’;

const MyForm: React.FC = () => {
const nameRef = useRef<HTMLInputElement>(null);

const handleSubmit = (event: React.FormEvent) => {
event.preventDefault();
if (nameRef.current) {
alert(`Name: ${nameRef.current.value}`);
}
};

return (
<form onSubmit={handleSubmit}>
<label>
Name:
<input type=”text” ref={nameRef} />
label>
<button type=”submit”>Submitbutton>
form>
);
};

export default MyForm;

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

در این مثال TypeScript:

useRef برای پیگیری مقدار ورودی بدون ایجاد رندر مجدد مؤلفه در هر تغییر ورودی استفاده می شود.

nameRef.current برای دسترسی مستقیم به مقدار ورودی هنگام ارسال فرم استفاده می شود.

با استفاده از useRef به ویژه زمانی مفید است که مقدار فرم نیازی به ایجاد رندرهای مجدد برای اعتبارسنجی یا به‌روزرسانی‌های پویا نداشته باشد، و آن را به یک انتخاب عالی برای فرم‌های حساس به عملکرد تبدیل می‌کند.

نتیجه گیری

با استفاده از این پنج ترفند React در کد خود، می توانید عملکرد، خوانایی و قابلیت نگهداری را به میزان قابل توجهی بهبود بخشید. در اینجا یک جمع بندی سریع آمده است:

به جای استفاده از عملگرهای سه تایی برای رندر شرطی استفاده کنید &&.
از مزیت اولیه سازی تنبل در استفاده کنید useState.
برای بهبود زمان بارگذاری اولیه، بارگذاری تنبل را برای قطعات اجرا کنید.
از زنجیره اختیاری برای دسترسی ایمن تر به اموال در جاوا اسکریپت استفاده کنید.
استفاده کنید useRef در فرم هایی برای جلوگیری از ارائه مجدد غیر ضروری.

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

{0 && <h1>Hello world 5h1>}
{0 ? <h1>Hello world 6h1> : null}

{0 ? <h1>Hello world 5h1> : null}

import React, { useState } from 'react';

const ExpensiveComponent: React.FC = () => {
  const [count, setCount] = useState(() => {
    // Expensive computation
    console.log('Computing initial state');
    return Math.random(); // For example, generate a random number
  });

  return <div>Initial Random Value: {count}div>;
};

export default ExpensiveComponent;

import React, { Suspense } from 'react';

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

function App() {
  return (
    <Suspense fallback={<div>Loading...div>}>
      <LazyComponent />
    Suspense>
  );
}

function MyComponent({ data }) {
  const address = data?.info?.address ?? "Address not available";
  return <div>{address}div>;
}

import React, { useRef } from 'react';

const MyForm: React.FC = () => {
  const nameRef = useRef<HTMLInputElement>(null);

  const handleSubmit = (event: React.FormEvent) => {
    event.preventDefault();
    if (nameRef.current) {
      alert(`Name: ${nameRef.current.value}`);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Name:
        <input type="text" ref={nameRef} />
      label>
      <button type="submit">Submitbutton>
    form>
  );
};

export default MyForm;