روش های ایده آل کدنویسی ری اکت (React Best Practice)

کتابخانه react ساختار مشخصی برای پروژه های ری اکتی تعریف نکرده است. یعنی هر توسعه دهنده می تواند با توجه به نیازهای پروژه خود و تجربیات قبلی، ساختار کدنویسی و فولدربندی آن را تغییر دهد. اما در پروژه های واقعی و Enterprise یک سری قواعد و استانداردهای مشخص (و best practice)  در زمینه کدنویسی ری اکت وجود دارد. این قواعد مورد توافق اغلب توسعه دهندگان ReactJS در جهان می باشد.

استفاده از نسخه کوتاه و خلاصه jsx:

هنگامی که در JSX می خواهید یک متغیر بولین (boolean) بعنوان props ارسال کنید، دیگر نیازی به درج کلمه true نمی باشد. فقط کافیست نام متغیر بولین خود را بنویسید. بصورت زیر:

روش بد:

return (
  <Navbar showTitle={true} />
);

روش خوب:

return(
   <Navbar showTitle />  
)

استفاده از عملگرهای Ternary:

فرض کنید شما می خواهید بر اساس نقش هر کاربر، داده مشخصی را به او نمایش دهیم.

روش بد:

const { role } = user;

if(role === ADMIN) {
    return <AdminUser />
} else{
    return <NormalUser />
}

روش خوب:

const { role } = user;

return role === ADMIN ? <AdminUser /> : <NormalUser />

استفاده از Object Literal:

استفاده از ساختار object literal می تواند به خوانایی کدهای شما کمک کند. فرض کنید می خواهید بر اساس نقش کاربران (user role) سه نوع از کاربران را نمایش دهید. در اینحالت نمی توانید از عملگرهای ternary استفاده کنید زیرا بیش از دو عملوند داریم.

روش بد:

const {role} = user

switch(role){
    case ADMIN:
        return <AdminUser />
    case EMPLOYEE:
        return <EmployeeUser />
    case USER:
        return <NormalUser />
}

روش خوب:

const {role} = user
const components = {
    ADMIN: AdminUser,
    EMPLOYEE: EmployeeUser,
    USER: NormalUser
};
const Component = components[role];
return <Componenent />;

مشخص است که روش دوم حرفه ای تر و خواناتر می باشد.

استفاده از فرگمنت (Fragment):

در کد jsx خود همیشه سعی کنید بجای div از فرگمنت ها (<>…</> یا <React.Fragment>…</React.Fragment>) استفاده کنید. به این دلیل که با استفاده از Fragment در ریکت، یک div اضافی در DOM تولید نمی شود. در صورتی که بجای فرگمنت از یک تگ اضافی مانند div یا p در JSX استفاده شود، علاوه بر تاثیر منفی بر روی کارایی (PERFORMANCE) اپلیکیشن، ممکن است رابط کاربری اپلیکیشن را نیز بهم بریزد.

روش بد:

return (
    <div>
        <Component1 />
    <Component2 />
    <Component3 />
    </div>  
)

روش خوب:

return (
    <>
        <Component1 />
    <Component2 />
    <Component3 />
    </>  
)

عدم تعریف بدنه فانکشن در متد render:

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

روش بد:

return (
    <button onClick={() => dispatch(ACTION_TO_SEND_DATA)}>    // NOTICE HERE
      This is a bad example 
    </button>  
)

روش خوب:

const submitData = () => dispatch(ACTION_TO_SEND_DATA)

return (
  <button onClick={submitData}>  
    This is a good example 
  </button>  
)

استفاده از Memo:

React.PureComponent و memo می توانند تاثیر مثبت زیادی روی کارایی یا performance اپلیکیشن داشته باشند. بطور کلی کار آنها، جلوگیری از رندر اضافی کامپوننت ها می باشد. به مثال زیر توجه کنید:

روش بد:

import React, { useState } from "react";

export const TestMemo = () => {
  const [userName, setUserName] = useState("faisal");
  const [count, setCount] = useState(0);
  
  const increment = () => setCount((count) => count + 1);
  
  return (
    <>
      <ChildrenComponent userName={userName} />
      <button onClick={increment}> Increment </button>
    </>
  );
};

const ChildrenComponent =({ userName }) => {
  console.log("rendered", userName);
  return <div> {userName} </div>;
};

در کد بالا مشاهده می کنیم که کامپوننت Child باید یکبار اجرا شود، زیرا ارتباطی با count ندارد. اما در واقع با هر بار کلیک روی دکمه button کامپوننت child هم یکبار re-render می شود و این باعث کاهش کارایی برنامه خواهد شد.

روش خوب:

می خواهیم از قابلیت React.memo برای ChildrenComponent استفاده کنیم.

import React ,{useState} from "react";

const ChildrenComponent = React.memo(({userName}) => {
    console.log('rendered')
    return <div> {userName}</div>
})

اکنون کامپوننت child با هر بار کلیک روی دکمه مجددا رندر نمی شود. بلکه هر بار که نیاز باشد رندر می شود.

تعریف استایل های css در جاوا اسکریپت:

سعی کنید استایل های css را بصورت آبجکت جاوا اسکریپت تعریف کنید. به مثال زیر توجه کنید:

روش بد:

// CSS FILE

.body {
  height: 10px;
}

//JSX

return <div className='body'>
   
</div>

روش خوب:

const bodyStyle = {
  height: "10px"
}

return <div style={bodyStyle}>

</div>

استفاده از Object Destructuring:

اگر سعی کنید از قابلیت object destructuring در کدهای ری اکت خود استفاده کنید، کد خواناتر و کوتاه تری خواهید داشت. برای مثال:

روش بد:

return (
  <>
    <div> {user.name} </div>
    <div> {user.age} </div>
    <div> {user.profession} </div>
  </>  
)

روش خوب:

const { name, age, profession } = user;

return (
  <>
    <div> {name} </div>
    <div> {age} </div>
    <div> {profession} </div>
  </>  
)

props های رشته ای نیاز به {} ندارند:

اگر نوع props ارسالی به کامپوننت دیگر string است سعی کنید از } و { استفاده نکنید. و فقط کوتیشن بگذارید. بعنوان مثال:

روش بد:

return(
  <Navbar title={"My Special App"} />
)

روش خوب:

return(
  <Navbar title="My Special App" />  
)

حذف کدهای js از کدهای jsx:

تا حد امکان سعی کنید کدهای جاوا اسکریپت را از کدهای JSX جدا و مجزا کنید. برای مثال:

روش بد:

return (
  <ul>
    {posts.map((post) => (
      <li onClick={event => {
        console.log(event.target, 'clicked!'); // <- THIS IS BAD
        }} key={post.id}>{post.title}
      </li>
    ))}
  </ul>
);

روش خوب:

const onClickHandler = (event) => {
   console.log(event.target, 'clicked!'); 
}

return (
  <ul>
    {posts.map((post) => (
      <li onClick={onClickHandler} key={post.id}> {post.title} </li>
    ))}
  </ul>
);

استفاده از Template Literal:

برای رشته های بزرگ و طولانی، سعی کنید از Template Literal استفاده کنید و هرگز از اتصال رشته (string concatenate) استفاده نکنید. زیرا کد ما با روش literal خواناتر و تمیزتر است.

روش بد:

const userDetails = user.name + "'s profession is" + user.proffession

return (
  <div> {userDetails} </div>  
)

روش خوب:

const userDetails = `${user.name}'s profession is ${user.proffession}`

return (
  <div> {userDetails} </div>  
)

به ترتیب نوشتن import ها در کامپوننت:

سعی کنید همیشه import ها را در یک ترتیب مشخص تعریف کنید. بعنوان مثال:

روش بد:

import React from 'react';
import ErrorImg from '../../assets/images/error.png';
import styled from 'styled-components/native';
import colors from '../../styles/colors';
import { PropTypes } from 'prop-types';

روش خوب:

روشی که برای ترتیب import ها پیشنهاد می شود بصورت زیر است:

1. Built-in
2. External
3. Internal

import React from 'react';

import { PropTypes } from 'prop-types';
import styled from 'styled-components/native';

import ErrorImg from '../../assets/images/error.png';
import colors from '../../styles/colors';

استفاده از Implicit return:

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

روش بد:

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

روش خوب:

const add = (a, b) => a + b;

رعایت قواعد نام گذاری کامپوننت ها:

همیشه سعی کنید در نام گذاری کامپوننت های ریکت، قاعده Pascal case و در نام گذاری instance کامپوننت قاعده camel case را رعایت کنید.

روش بد:

import reservationCard from './ReservationCard';

const ReservationItem = <ReservationCard />;

روش خوب:

import ReservationCard from './ReservationCard';

const reservationItem = <ReservationCard />;

عدم استفاده از اسامی کلیدی برای props

نباید در نام گذاری props های ارسالی کامپوننت، از اسامی رزرو شده و کلیدی ریکت استفاده کرد. بعنوان مثال:

روش بد:

<MyComponent style="dark" />

<MyComponent className="dark" />

روش خوب:

<MyComponent variant="fancy" />

قواعد استفاده از کوتیشن در React:

سعی کنید از دابل کوتیشن برای رشته های داخل JSX و سینگل کوتیشن برای سایر رشته ها استفاده کنید. بعنوان مثال:

روش بد:

<Foo bar='bar' />

<Foo style={{ left: "20px" }} />

روش خوب:

<Foo bar="bar" />

<Foo style={{ left: '20px' }} />

رعایت قواعد نام گذاری props:

همیشه سعی کنید از قاعده Camel Case برای نام گذاری نام props و از قاعده Pascal Case برای نام گذاری مقدار prop استفاده کنید. بعنوان مثال:

روش بد:

<Component
  UserName="hello"
  phone_number={12345678}
/>

روش خوب:

<MyComponent
  userName="hello"
  phoneNumber={12345678}
  Component={SomeComponent}
/>

استفاده از پرانتز در JSX:

در صورتی که عبارت مقابل دستور return در JSX بیش از یک خط دارد، از پرانتز استفاده کنید. برای مثال:

روش بد:

return <MyComponent variant="long">
           <MyChild />
       </MyComponent>;

روش خوب:

return (
    <MyComponent variant="long">
      <MyChild />
    </MyComponent>
);

استفاده از تگ های self-closing:

اگر کامپوننت شما children ندارد بهتر است از تگ های self-closing استفاده کنید. زیرا خوانایی کد را بالا می برد.

روش بد:

<SomeComponent variant="stuff"></SomeComponent>

روش خوب:

<SomeComponent variant="stuff" />

عدم استفاده از underline در نام گذاری متد:

سعی کنید از underline در نام گذاری متدهای ریکت استفاده نکنید. برای مثال:

روش بد:

const _onClickHandler = () => {
  // do stuff
}

روش خوب:

const onClickHandler = () => {
  // do stuff
}

تعریف اتریبیوت alt در تصاویر:

همیشه سعی کنید اتریبیوت alt را برای تمام تصاویر اپلیکیشن خود در نظر بگیرید. نیازی نیست در این اتریبیوت عبارت “تصویر” یا “عکس” را بکار ببرید. زیرا ربات ها و screen-reader ها می دانند که در حال پردازش یک تصویر هستند. برای مثال نباید alt را به این صورت تعریف کرد: “تصویر مردی در حال قدم زدن زیر باران”

روش بد:

<img src="hello.jpg" />

<img src="hello.jpg" alt="Picture of me rowing a boat" />

روش خوب:

<img src="hello.jpg" alt="Me waving hello" />

نتیجه گیری:

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