چگونه کد ReactJS خود را بهبود دهید|نکاتی برای خوانایی کد و بهره‌وری

ReactJS یکی از محبوب‌ترین کتابخانه‌های جاوااسکریپت برای ساخت برنامه‌های قابل مقیاس و با عملکرد بالا است.

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

نوشتن کد خوب همچنین به شما کمک می‌کند تا توضیحاتی که هم‌تیمی‌هایتان می‌دهند (و صادقانه باشیم - کی دوست ندارد توضیحاتی مثل "با تشکر، تایید شده" را بخواند :) ) را کاهش دهید.

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

برای بهره‌گیری حداکثری از این راهنما، باید با React آشنایی اولیه داشته باشید.

1- استفاده از ثابت‌ها

در جاوااسکریپت، ما می‌توانیم با استفاده از کلمه کلیدی `const` ثوابت را اعلام کنیم. این به ما کمک می‌کند تا از دوباره اعلام کردن یک مقدار جلوگیری کنیم. بنابراین، ثوابت گزینه‌ی عالی‌ای برای ذخیره کلیدهای API و مقادیر مشابه می‌باشند.

ثوابت به بهره‌وری، خوانایی، و بین‌المللی‌سازی هر کد React کمک می‌کنند.

در هر پروژه‌ی ReactJS، باید از هارد‌کد کردن رشته‌ها (محتوا) در کامپوننت‌های خود پرهیز کنید.

این کار باعث می‌شود پروژه‌ی شما قابل نگهداری‌تر، قابل مقیاس‌تر، و قابل خواندن‌تر شود، زیرا لایه‌های رابط کاربری (UI)، داده، و محتوا را از یکدیگر جدا می‌کند.

ثوابت شامل موارد زیر می‌شوند:

• API keys
   
• URLs
   
• Content

بسیاری از وب‌سایت‌ها از چندین زبان مانند انگلیسی، فرانسوی، اسپانیایی و غیره پشتیبانی می‌کنند. این به عنوان بین‌المللی‌سازی (یا i18n به اختصار) شناخته می‌شود.

اگر شما ویژگی‌های بین‌المللی‌سازی را در وب‌سایت خود فعال می‌کنید، باید فایل‌های ثابت جداگانه برای محتوای خود ایجاد کنید - به عنوان مثال en.js و fr.js. حتی اگر پشتیبانی از چندین زبان ندارید یا بدون بین‌المللی‌سازی، همچنان بهتر است محتوای خود را خارج از کد در یک فایل ثابت نگه دارید.

شما می‌توانید فایل ثابت خود را به دو صورت نامگذاری کنید: [زبان_مخفف].js یا constants.js. این نام‌های فایل‌ها رایج‌ترین نام‌هایی هستند که توسعه‌دهندگان برای این منظور استفاده می‌کنند.

چگونه فایل ثابت خود را ایجاد کنید:

ثوابت به سادگی شیء‌های جاوااسکریپت با کلید/مقدار‌ها هستند. ابتدا یک شیء را با یک نام که محتوایی که نگه می‌دارد را بازتاب می‌دهد، اعلام کنید. چون این مقادیر رشته‌ها هستند، برای آن‌ها از نقل قول استفاده می‌کنیم. قبل از صادر کردن (export) پیام‌ها، از ()Object.freeze استفاده کنید - این باعث می‌شود هیچ تغییری از خارج به اتفاقی در مقدار هیچ کلیدی انجام نشود.

برای استفاده از ثوابت، باید فایل ثابت را در فایل کامپوننت خود وارد کنید (import) و پس از وارد کردن آن، می‌توانید با استفاده از عملگر نقطه (dot operator) به کلیدها دسترسی پیدا کنید:

// constants.js or en.js
const MESSAGES = { 
    'HEADING': 'welcome to the website",
    'ENTER_YOUR_NAME': 'Enter user name',
    'HOME': [{
        'HEADING': 'welcome to the home'
     }]
}

Object.freeze(MESSAGES);

export default MESSAGES;

// Using constants.js in component
import MESSAGES from '../constants/constants
const Home = () => {
   return(
       <p>{MESSAGES.HEADING}</h1>
   )
}
export default Home;

2- استفاده از Helpers / Utils:

در حین کار بر روی یک کد ReactJS، شناسایی قسمت‌هایی در کد که می‌توانند به عنوان کمک‌ها یا ابزارهای کمکی مستقل از کامپوننت‌ها عمل کنند، بسیار مهم است.

کمک‌ها یا ابزارهای کمکی مسئول انجام وظیفه‌هایی هستند که ممکن است در چندین نقطه مختلف و توسط چندین توسعه‌دهنده مورد استفاده قرار گیرند. به عنوان مثال، تغییر فرمت تاریخ، تشکیل رشته، کد فراخوانی API، و مدیریت DOM از جمله مواردی هستند که می‌توانند در این دسته قرار گیرند.

چرا از کمک‌ها یا ابزارهای کمکی استفاده کنیم؟

هر کامپوننت باید فقط مسئول یک وظیفه باشد که به عنوان "اصل مسئولیت تکی" شناخته می‌شود.

ما باید توابع قابل استفاده مجدد را شناسایی کنیم و آنها را به کمک‌ها (Utils) منتقل کنیم به دلایل زیر:

1. منجر به کامپوننت‌های تمیزتر و کد تمیزتر می‌شود.
2. انسجام تنگاتنگی (Tight coupling) وابستگی به حداقل می‌آید.
3. امکان‌پذیری توسعه به راحتی افزایش می‌یابد.
4. نگهداری و اشکال‌زدایی ساده‌تر می‌شود.
5. افزایش قابلیت استفاده مجدد.

کامپوننت‌ها حالا تنها مسئول رابط کاربری (UI) هستند.

```
// dateUtils.js : Moved the formatDate to a seprate util file to have reusability
export function formatDate(date) {
   const options = { year: 'numeric', month: 'long', day: 'numeric' };
   return new Date(date).toLocaleDateString(undefined, options);
}

// Updated Blog.jsx component after util
import React, { Component } from 'react';
import { formatDate } from './dateUtils';
const Blog = ({title, content, date}) => {
    return (
       <div>
           <h2>{title}</h2>
           <p>{content}</p>
           <p>Published on: {formatDate(date)}</p>
       </div>
   );
}
}

مثالی که در کد بالا دیده می‌شود، ما یک تابع به نام `formatDate` داخل کامپوننت Blog داریم. در اینجا می‌توانیم `formatDate` را به کمک‌ها (Utils) منتقل کنیم. چرا؟

1. `formatDate` مسئول فرمت‌بندی تاریخ است و نه مسئول نمایش تاریخ.
2. `formatDate` ممکن است توسط کامپوننت دیگری استفاده شود.
3. `formatDate` ممکن است بر اساس نیازهای کسب‌وکار فرمت‌های مختلفی داشته باشد. به عنوان مثال، در حال حاضر ما یک پارامتر دوم بر اساس نیازهای این کامپوننت ارسال می‌کنیم. اگر نیازهای جدیدی پیش بیاید، توسعه‌دهنده باید کامپوننت را دوباره بنویسد.

با انتقال `formatDate` به کمک‌ها، این تابع تبدیل به یک ابزار کمکی (Utility) می‌شود که می‌تواند توسط هر کامپوننتی استفاده شود و تغییرات در فرمت‌بندی تاریخ را باعث تغییر در یک مکان مرکزی می‌کند، بدون نیاز به تغییر در همه کامپوننت‌ها که از آن استفاده می‌کنند. این به عنوان یک مثال از مدیریت مناسب کد و جلوگیری از تکرار کد و اشکال‌زدایی آسان در آینده خدمت می‌کند.

3- یادگیری چگونگی استفاده از Props

برای ارتباط بین کامپوننت‌ها در ReactJS، از Props استفاده می‌کنیم. اما راه‌های مختلفی برای انجام این کار وجود دارد.

مهم است که فقط یک سبک برای مصرف Props در کامپوننت‌های کد شما انتخاب کنید. این باعث می‌شود که کد یکپارچه باشد. بیش از یک روش برای از بین بردن Props وجود دارد، به همین دلیل برای یکپارچگی و خواناتری کد خود فقط یک روش را انتخاب کنید.

بیایید در مورد راه‌هایی که می‌توانید با Props در React کار کنید، صحبت کنیم.

چگونگی استفاده از Props

در این رویکرد، ما باید هر بار که می‌خواهیم از props استفاده کنیم، props را تکرار کنیم.

این رویکرد یک روش عالی برای مصرف props نیست چرا که ما هر زمان که می‌خواهیم از آنها استفاده کنیم، از آنها تکرار می‌کنیم. علاوه بر تکرار بودن، زمانی که به ایجاد props تو در تو می‌آید، نیاز به تایپ زیادی دارد.

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

در مثال کد زیر، می‌توانید ببینید که چرا این رویکرد بهترین گزینه نیست. ما کامپوننت Input را داریم که دارای props مانند type، placeholder، name و changeHandler است. در بخش بازگشت، ما با هر ویژگی مانند props.type، props.placeholder، و غیره، props را تکرار می‌کنیم.

const Input = (props) => {
   return <input 
   type={props.type} 
   placeholder={props.placeholder} 
   name={props.name} 
   className="block p-2 my-2 text-black" 
   onChange={props.changeHandler}/>
}
export default Input;

چگونگی از بین بردن (Destructuring) Props

در رویکرد دوم برای کار با props، از متغیردهی تخریبی (destructuring) جاوااسکریپت استفاده می‌کنیم.

این روش بهبودی نسبت به رویکرد اول است، زیرا در این روش ما هر زمان که از props استفاده می‌کنیم، props را تکرار نمی‌کنیم.

در ادامه، مثالی از تخریب props آمده است. در قطعه کد ابتدایی، ما type، placeholder، name و changeHandler را از props به عنوان اولین مورد در کامپوننت دریافت می‌کنیم.

const { type, placeholder, name, changeHandler } = props

در مثال کد زیر، می‌توانیم بهبود در کد را مشاهده کنیم. ما کامپوننت Input را با props داریم، اما به جای تکرار props.name، ما props را تخریب می‌کنیم. این بهبود بزرگی در خوانایی و تجربه توسعه‌دهنده دارد.

const Input = (props) => {
   const { type, placeholder, name, changeHandler } = props;
   return <input 
   type={type} 
   placeholder={placeholder} 
   name={name} 
   className="block p-2 my-2 text-black" 
   onChange={changeHandler}/>
}

چگونگی تخریب (Destructuring) props در آرگومان‌های کامپوننت:

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

نسبت به رویکرد قبلی، این روش:

- خشک (Don't Repeat Yourself - DRY) است: ما props را تکرار نمی‌کنیم.
- قابل خواندن است: در خط اول (تعریف) کامپوننت، می‌دانیم که کدام props را انتظار دارد. این باعث بهبود خوانایی و وضوح کامپوننت می‌شود.

در کد زیر، می‌بینیم که ما در تعریف کامپوننت props را تخریب کرده‌ایم. این باعث بهبود خوانایی می‌شود. چرا که توسعه‌دهندگان می‌توانند به خط اول نگاه کنند و بفهمند که در این کامپوننت چند و چه props انتظار دارد.

const Input = ({ type, placeholder, name, changeHandler }) => {
   return <input 
   type={type} 
   placeholder={placeholder} 
   name={name} 
   className="block p-2 my-2 text-black" 
   onChange={changeHandler}/>
}

4- یک فایل برای هر کامپوننت داشته باشید

در ReactJS، داشتن یک فایل برای هر کامپوننت مهم است. این کمک می‌کند کد شما تمیزتر و قابل نگهداری‌تر باشد.

همچنین این اصل مسئولیت تکی را که قبلاً اشاره کردم، رعایت می‌کند.

جلبکننده است که یک فایل داشته باشیم و تمام کد را در داخل آن بنویسیم تا از عزل متغیرها و کدها استفاده کنیم - اما باید آن را به کامپوننت‌های کوچکتر تقسیم کنیم.

در مثال زیر، ما یک فایل به نام Input.jsx داریم که دارای دو کامپوننت Input و Icon است. ما از Icon در بخش بازگشتی (return) Input استفاده می‌کنیم.

به نظر می‌رسد که Input و Icon مرتبط هستند و منطقی است که آنها را در یک فایل گروه‌بندی کنیم. اما نباید این کار را انجام دهیم، زیرا این یک راه‌حل قابل توسعه نیست (و همچنین قابل استفاده مجدد نیز نیست).

// Don't do this:
import React from 'react';
// File name: Input.jsx
// This example shows how we are exporting 2 components from one file
// We should NOT do this
const Input = ({ type, placeholder, name, changeHandler }) => {
   return <>
   <input 
   type={type} 
   placeholder={placeholder} 
   name={name} 
   className="block p-2 my-2 text-black" 
   onChange={changeHandler}/>
   
   <Icon type="warning"/>
}
       <>
const Icon = ({ type, url}) => {
   return <img src={url} data-type={type} />
}
export {Input, Icon};

به جای اینکه باید دو کامپوننت مجزا برای Input و Icon بسازیم، مانند مثال زیر نشان داده شده است. این به شما کمک می‌کند تا هر دو کامپوننت را مجدداً استفاده کنید و آنها را به صورت مستقل ارتقا دهید.

// Do this instead:
// Input.jsx: create 2 separate files for Input and InputIcon
import React from 'react';
const Input = ({ type, placeholder, name, changeHandler }) => {
   return <input 
   type={type} 
   placeholder={placeholder} 
   name={name} 
   className="block p-2 my-2 text-black" 
   onChange={changeHandler}/>
}
export default Input;

5- از توابع درون‌خط استفاده نکنید

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

باید JSX خود را جدا از کد منطقی خود نگه دارید. توابع درون‌خط قابل استفاده مجدد نیستند، به انتزاع کد کمک نمی‌کنند و سختی در آزمون دارند.

به همین دلیل همیشه باید از توابع درون‌خط خودداری کنید.

در قطعه کد زیر، ما تابع handleIncrement را به عنوان یک تابع درون‌خط در button داریم. این قابل استفاده مجدد نیست و به صورت تنگاتنگ با کامپوننت ارتباط دارد:

// Don't do this:
import React, { useState } from 'react';
function CounterInline() {
 const [count, setCount] = useState(0);
 const handleIncrement = () => {
   setCount(count + 1);
 };
 return (
   <div>
     <p>Count: {count}</p>
     <button onClick={handleIncrement}>Increment</button> 
   </div>
 );
}
export default CounterInline;

پس چگونه می‌توانیم از توابع درون‌خط فاصله بگیریم؟ بیایید به نحوه بازنویسی کد بالا نگاهی بیاندازیم.

در قطعه کد زیر، می‌توانیم incrementCount را در Button استفاده کنیم و انتظار دارد دو آرگومان دریافت کند. ما اینجا تابع را قابل استفاده مجدد کرده‌ایم:

// Do this instead:
import React, { useState } from 'react';
// Standalone function for incrementing
function incrementCount(currentCount, setCount) {
 setCount(currentCount + 1);
}
const CounterStandalone = () => {
 const [count, setCount] = useState(0);
 return (
   <div>
     <p>Count: {count}</p>
     <button onClick={() => incrementCount(count, setCount)}>Increment</button>
   </div>
 );
}
export default CounterStandalone;

6- پیاده‌سازی یک کامپوننت 404 و مسیر (Route)

در حین پیاده‌سازی مسیردهی در ReactJS، باید یک کامپوننت 404 اضافه کنیم.

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

React-router راهی آسان برای نمایش خطا وقتی که سرور کد وضعیت 404 را برمی‌گرداند، فراهم می‌کند. شما باید یک کامپوننت ایجاد کنید که باید وقتی کد وضعیت 404 از سمت سرور برمی‌گردد، نمایش داده شود.

هر زمان که یک کاربر یک مسیر را تایپ کند یا به یک مسیری که وجود ندارد برسد، صفحه 404 پیام خطا را به کاربر نمایش می‌دهد که تجربه کاربری بهتری است (تا فقط مشاهده "404" بدون توضیحی نامفهوم).

نکته: در کامپوننت، یک پیوند به صفحه اصلی وب‌سایت خود اضافه کنید. این به کاربر کمک می‌کند تا به صفحه اصلی وب‌سایت شما هدایت شود.

<route path="*" component={<Error404/>} />

7- به تدریج داده‌ها را دریافت کنید

در برنامه‌های React، اغلب داده‌ها را از طریق API‌ها دریافت می‌کنید.

به جای دریافت داده و ایجاد رابط کاربری به یکباره، باید داده‌ها را درخواستی دریافت کنیم - به عنوان مثال، هنگام پیمایش به دید، هنگام کلیک بر روی صفحه‌بندی، و غیره.

این عملکرد برنامه را بهبود می‌بخشد و تجربه کاربری را بهبود می‌بخشد.

چندین بسته وجود دارد که می‌توانند به شما در پیاده‌سازی بارگذاری تنبل (lazy loading) کمک کنند. بارگذاری تنبل یک تکنیک است که می‌توانید از آن برای بارگذاری داده‌ها به صورت درخواستی یا به تدریج به صورت لازم استفاده کنید. به جای نمایش تمام داده‌های API در یک زمان روی صفحه، فقط داده‌های مورد نیاز را نمایش می‌دهد.

اینجا چگونگی نصب بسته react-lazyload را می‌بینید:

// install react-lazyload package
npm install react-lazyload

و در اینجا کد آن است:

// Create a component - ItemList.jsx
import React, { useState, useEffect } from 'react';
import axios from 'axios';
const ItemList = () => {
 const [items, setItems] = useState([]);
 useEffect(() => {
   // Fetch data from your API here
   axios.get('https://example.com/api/items')
     .then(response => {
       setItems(response.data);
     })
     .catch(error => {
       console.error('Error fetching data:', error);
     });
 }, []);
 return (
   <div>
     <h2>Item List</h2>
     <ul>
       {items.map(item => (
         <li key={item.id}>
           {item.name}
         </li>
       ))}
     </ul>
   </div>
 );
};
export default ItemList;

// App.js
import React, { lazy, Suspense } from 'react';
import LazyLoad from 'react-lazyload';
// Import the lazy-loaded component
const ItemList = lazy(() => import('./ItemList'));
function App() {
 return (
   <div>
     <h1>React LazyLoad with API Data Example</h1>
     {/* Use React LazyLoad to lazy-load the component */}
     <LazyLoad height={200}>
       <Suspense fallback={<div>Loading...</div>}>
         <ItemList />
       </Suspense>
     </LazyLoad>
   </div>
 );
}
export default App;

در مثال کد بالا، یک کامپوننت ایجاد کرده‌ایم که درخواست‌های API را انجام داده و داده‌های API را به صورت ItemList.jsx رندر می‌کند. هنگام استفاده از ItemList در App، به جای نمایش کل داده به یکباره، از LazLoad برای بارگذاری کامپوننت استفاده می‌کنیم.

به عبارت دیگر، کامپوننت به صورت تنبل بارگذاری می‌شود زمانی که به نزدیکی دیدپذیر شدن در ویوپورت می‌آید و داده‌ها از API نمایش داده می‌شوند.

بعضی از بسته‌هایی که می‌توانید برای بارگذاری تنبل از آنها استفاده کنید عبارتند از: react-lazyload، react-infinite-scroll-component و react-paginate.

8- استفاده از مقادیر منحصر به فرد برای ویژگی‌های کلیدی

یکی از دلایل محبوبیت React به خاطر "DOM مجازی" آن است.

DOM مجازی (VDOM) به شما کمک می‌کند فرآیند به‌روزرسانی رابط کاربری را بهینه‌سازی کنید.

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

React نیاز به ویژگی key دارد تا تشخیص دهد تغییر در کدام گره اتفاق افتاده است. به همین دلیل همیشه باید از یک مقدار منحصر به فرد برای key استفاده کنیم.

یک مثال خوب از چگونگی انجام این کار، افزودن شناسه (id) به هر مورد است.

توجه: از شاخص (index) به عنوان کلید تنها زمانی استفاده کنید که داده‌های شما ثابت (static) باشند و تغییر ترتیب یا فیلتر نشوند.

// List.jsx
import React from 'react';
const List = ({ items }) => (
 return(<ul>
   {items.map((item, index) => (
     <li key={index}>{item}</li>
   ))}
 </ul>)
);
export default List;

// App.jsx
import List from './List';
const App = () => {
 const items = ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5'];
 return (
   <div>
     <h1>Simple List Example</h1>
     <List items={items} />
   </div>
 );
};
export default App;

در مثال کد بالا، ما با استفاده از تابع map روی داده‌ها یک لیست ایجاد می‌کنیم. در کامپوننت List، ما شاخص (index) را به ویژگی کلیدی (key) اختصاص می‌دهیم. این ویژگی به طور پنهانی توسط ReactJS استفاده می‌شود تا هنگامی که هر li اصلاح یا تغییر پیدا کند، عملکرد را بهینه‌سازی کند.

9- استفاده از انواع (Types)

استفاده از ابزارهای دارای بررسی نوع استاتیک (مانند TypeScript) می‌تواند به شما کمک کند تا از وقوع اشکالات غیرضروری در کدتان جلوگیری کنید.

همچنین کد شما را با کیفیت و بررسی نوعی پشتیبانی خواهد کرد.

اگر کسی هستید که به تازگی شروع به یادگیری در مورد بررسی نوع می‌کنید، می‌توانید با proptypes شروع کنید و در آینده TypeScript را یاد بگیرید.

جاوااسکریپت از نوع مشخص (strictly typed) پیروی نمی‌کند، به این معنا که احتمال وقوع اشکالات غیرمنتظره یا خطاهای نوعی بیشتر است.

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

بنابراین، نوع‌های دقیق و TypeScript می‌توانند به شما کمک کنند تا از وقوع چنین اشکالات غیرمنتظره‌ای در طول توسعه جلوگیری کنید.

import React from 'react';
import PropTypes from 'prop-types';
const UserCard = ({ name, age, email }) => {
 return (
   <div>
     <h2>User Card</h2>
     <p>Name: {name}</p>
     <p>Age: {age}</p>
     <p>Email: {email}</p>
   </div>
 );
};
// Define the prop types for the UserCard component
UserCard.propTypes = {
 name: PropTypes.string.isRequired, // A required string prop
 age: PropTypes.number.isRequired,  // A required number prop
 email: PropTypes.string,           // An optional string prop
};

import UserCard from 'userCard';
const App = () => {
 return (
   <div>
     <h1>PropTypes Example</h1>
     <UserCard name="John Doe" age={30} email="john@example.com" />
   </div>
 );
};
export default App;

در مثال کد بالا، ما یک کامپوننت به نام UserCard ایجاد کرده‌ایم. این کامپوننت انتظار دارد که 3 ویژگی (prop) به نام‌های name، age و email دریافت کند. با استفاده از proptypes، ما دو مورد برای ویژگی‌ها اعلام می‌کنیم - نوع داده (نوع داده‌ای که ویژگی‌ها باید داشته باشند، مانند رشته، عدد و غیره) و اینکه ویژگی اجباری یا اختیاری است.

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

10- استفاده از توابع lazy() و Suspense()

ReactJS از بسته‌بندی‌کننده Webpack (اگر از creat-react-app استفاده می‌کنید) استفاده می‌کند.

Webpack مسائل مربوط به بسته‌بندی کد را در اختیار دارد و عملیاتی مانند شیک‌تر کردن درخت (tree shaking) را انجام می‌دهد.

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

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

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

در هنگام استفاده از lazy() باید نیز از Suspense() استفاده کنیم، زیرا lazy() یک راه همزمان برای بارگذاری کامپوننت‌ها است.

ما نمی‌خواهیم تا زمانی که مسیر ما بارگذاری نشده است، به کاربر یک صفحه خالی نمایش دهیم. Suspense() با نمایش یک پیام در حین بارگذاری کامپوننت به کمک می‌آید.

 <Suspense fallback={<div>Loading...</div>}>
       {/* The LazyComponent will only be loaded when needed */}
       <LazyComponent />
</Suspense>

جمع بندی

به پایان رسیدیم. این نکات نه تنها مختص کد‌های بزرگ نیستند بلکه برای پروژه‌های هر اندازه‌ای مناسب هستند.

در سطح بالا ما در مورد مفاهیم زیر آموختیم:

- پیروی از اصل DRY
- پیروی از اصل مسئولیت تکی
- ایجاد تجربه کاربری خوب با بارگذاری تدریجی داده‌ها
- بهبود قابلیت خوانایی کد
- بهبود تجربه توسعه‌دهنده
- جلوگیری از اشکالات در زمان توسعه
- بهبود عملکرد

موفق باشید!