نکات React Pro – چگونه مانند یک حرفه ای کد با کیفیت بالا بنویسید

بهترین روش‌ها برای ایجاد رابط‌های کاربری واکنش‌پذیر با React

React یک کتابخانه محبوب جاوا اسکریپت برای ساخت رابط های کاربری است که هم پویا و هم پاسخگو هستند. مجموعه ای قدرتمند از ویژگی ها را برای ساخت برنامه های کاربردی مقیاس پذیر، کارآمد و قابل نگهداری ارائه می دهد. در این پست وبلاگ، برخی از بهترین روش ها برای ایجاد رابط کاربری با React را بررسی خواهیم کرد.

نحو ES6

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

در اینجا یک مثال از یک مؤلفه ساده است که از نحو ES6 استفاده می کند:

از توابع پیکان استفاده کنید

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

در اینجا یک مثال از یک مؤلفه است که از توابع فلش استفاده می کند:

const add = (a, b) => {
  return a + b;
}

از Template Literals استفاده کنید

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

در اینجا نمونه ای از کامپوننتی است که از الفبای الگو استفاده می کند:

const MyComponent = ({ name }) => {
  return <div>Hello, ${name}!</div>;
};

از const و let استفاده کنید

هنگام اعلان متغیرها در React، استفاده از آن تمرین خوبی است const و let بجای var. این تضمین می کند که محدوده متغیرهای شما به خوبی تعریف شده است و استدلال در مورد کد شما را آسان تر می کند.

در اینجا یک مثال از یک جزء است که استفاده می کند const و let:

const MyComponent = ({ name }) => {
  const message = `Hello, ${name}!`;
  let color = 'blue';

  return <div style={{ color }}>{message}</div>;
};

تخریب شی

تخریب شی یک ویژگی راحت ES6 است که به شما امکان می دهد مقادیر را از یک شی استخراج کنید و آنها را به متغیرهای جداگانه اختصاص دهید. در React، می‌توانید از ساختارزدایی برای ساده‌سازی کد و آسان‌تر خواندن آن استفاده کنید.

در اینجا یک مثال از کامپوننتی است که از تخریب شی استفاده می کند:

const myObject = {
    name: "Acid"
    role: "Developer"
}

const { name, role } = myObject;

تعریف اشیا

هنگام تعریف اشیاء در React، استفاده از سینتکس کوتاه و ساختارشکن شی برای اینکه کد خود را مختصرتر و خواناتر کنید، تمرین خوبی است.

در اینجا مثالی از کامپوننتی است که یک شی را با استفاده از نحو مختصر و ساختارشکنی تعریف می کند:

const fruit = {
    name: "Mango",
    sweet: True,
    title: "King of fruits 💪🏻"
}

const { name, sweet, title } = fruit;

کلید Prop با نقشه در JSX

هنگام رندر کردن لیستی از کامپوننت ها در React، مهم است که یک کامپوننت منحصر به فرد را در آن قرار دهید key پایه برای هر جزء این به React اجازه می دهد تا کامپوننت ها را پیگیری کند و رندر آنها را بهینه کند.

در اینجا نمونه ای از کامپوننتی است که از آن استفاده می کند key سرپا با map در JSX:

const MyComponent = ({ names }) => {
return <ul>{names.map(name => {
    <li key={name}>{name}</li>
})}</ul> 
};

نام کامپوننت باید در PascalCase باشد

در React، نامگذاری اجزای خود با استفاده از PascalCase روش خوبی است. این کار تشخیص اجزای خود را از عناصر معمولی HTML آسان تر می کند.

در اینجا نمونه ای از یک مؤلفه با نام با استفاده از PascalCase آمده است:

const MyComponent = () => {
    return <div>Follow Me!</div>
}

نام متغیر و تابع باید در camelCase باشد

در React، نامگذاری متغیرها و توابع خود با استفاده از camelCase تمرین خوبی است. این باعث می شود کد شما سازگارتر و راحت تر خوانده شود.

در اینجا نمونه ای از مؤلفه ای است که از camelCase برای نام متغیرها و تابع ها استفاده می کند:

const Component = ({ name }) => {
    const myVariable = `Hello, ${name}!`;
    function myFunction() {
        // Some Code
    }
    return <div>{myVariable}</div>;
}

null & undefined را برای Objects & Arrays علامت بزنید

در React، مهم است که بررسی کنید null و undefined مقادیر قبل از رندر کردن اشیا و آرایه ها. این تضمین می کند که اجزای شما خطا ایجاد نمی کنند و نتایج غیرمنتظره ای را نشان نمی دهند.

در اینجا یک مثال از یک مؤلفه است که برای بررسی وجود دارد null و undefined ارزش های:

const Hello = ({age}) => {
    if(!age) {
    return <div>Please provide your age 😥</div>
    }

    return <div>You are {age} years old!</div>
}

از دستکاری DOM اجتناب کنید

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

در اینجا یک مثال از یک مؤلفه است که از دستکاری DOM استفاده می کند:

<div id="dom"></div>

const link = document.getElementById("dom")
link.textContent = 'AcidOP on top';

هر شنونده رویداد را در useEffect حذف کنید

در React، حذف شنوندگان رویداد زمانی که کامپوننتی نصب نشده است، مهم است. این به جلوگیری از نشت حافظه و بهبود عملکرد برنامه شما کمک می کند.

در اینجا نمونه ای از مؤلفه ای است که شنوندگان رویداد را حذف می کند useEffect:

import { useState, useEffect } from 'react'

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

  useEffect(() => {
    setTimeout(() => {
      setCount((count) => count + 1);
    }, 1000);

    return () => {
        setCount(0)
    }
  }, []);

  return <h1>I've rendered {count} times!</h1>;
}

اجزای عملکردی توصیه می شود

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

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

const Component = () => {
    return <div>AcidOP on top!</div>
}

در اینجا یک مثال از یک جزء کلاس است:

import React, { Component } from 'react';

class HelloWorld extends Component {
  render() {
    return (
      <div>
        Hello, World!
      </div>
    );
  }
}

export default HelloWorld;

یک عادت توابع کمکی نوشتن ایجاد کنید

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

در اینجا یک مثال از یک مؤلفه است که از یک تابع کمکی استفاده می کند:

const MyComponent = ({ names }) => {
  const getNameList = () => {
    return names.map(name => <li key={name}>{name}</li>);
  };

  return (
    <div>
      <h2>Names:</h2>
      <ul>{getNameList()}</ul>
    </div>
  );
};

فایل های خود را به صورت تصادفی پرتاب نکنید

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

به عنوان مثال، می توانید برای هر جزء یک دایرکتوری ایجاد کنید و فایل کامپوننت، سبک ها و تست های آن را در کنار هم قرار دهید. همچنین می توانید یک دایرکتوری مشترک برای مؤلفه ها و برنامه های کاربردی مشترک ایجاد کنید.

src:
  components:
    Navbar.tsx
    Footer.tsx

styles:
  Navbar.css
  Footer.css

به جای if/else if از عبارت if/else if از اپراتور سه تایی استفاده کنید

در React، استفاده از عملگر سه تایی به جای استفاده از عملگر خوب است if/else اظهارات در صورت امکان این باعث می شود کد شما مختصرتر و راحت تر خوانده شود.

در اینجا مثالی از مولفه ای است که از عملگر سه تایی استفاده می کند:

const MyComponent = ({ name }) => {
  return <div>
    {name ? "Hello, ${name}!" : 'Please enter a name.'}
  </div>;
};

نتیجه

اینها تنها تعدادی از بهترین روش ها برای نوشتن کدهای تمیز و کارآمد در React هستند. با پیروی از این دستورالعمل ها، می توانید کدی بنویسید که درک، نگهداری و مقیاس آن در طول زمان آسان باشد. بنابراین، سعی کنید این اقدامات را در پروژه بعدی React خود پیاده سازی کنید و به ما اطلاع دهید که چگونه برای شما کار می کند!