رعایت Best Practice ها در React

سلام دوستان امیدوارم حالتون خوب باشه

تو این پست میخوام تجربه کار کردنم با React رو باهاتون به اشتراک بذارم

حدود یه سالی میشه که دارم با React کار میکنم و تو این یه سال به یه سری نکاتی پی بردم و دونستن اینا برای شما هم خالی از لطف نیست :)

اینجا لیست مواردی که میخوام توضیح بدم رو لیست میکنم تا راحتر بتونید پیداش کنید:

۱- استفاده از ES6,ES7

۲- انتخاب درست Component ها

۳- نحوه درست import ها

۴- انواع حالت برای State Initialization

از اینجا به بعد تو قسمت دوم این پست قراره منتشر بشه

۵- استفاده از PropTypes و defaultProps

۶- استفاده درست از Methods

۷- اندکی درباره‌ی setState

۸- اندکی درباره‌ی Destructuring

خب بریم سراغ نکات و Best Practice ها :

۱- استفاده از ES6,ES7

همون طور که میدونید هر ساله یه نسخه جدید از جاوااسکریپت ریلیز میشه که بهش میگیم اکمااسکریپت(ECMAScript) یا به اختصار ‌+es و توصیه من اینه که قبل از اومدن به سمت فرریمورک های JS بهتره خود جاوااسکریپت و تو مرحله بعد es6/es7 رو خوب یادبگیرید و درک کنید.

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

// What you have
let officers = [
  { id: 20, name: 'Captain Piett' },
  { id: 24, name: 'General Veers' },
  { id: 56, name: 'Admiral Ozzel' },
  { id: 88, name: 'Commander Jerjerrod' }
];

// What you need
[20, 24, 56, 88]

اگر از forEach استفاده کنیم باید همچین کاریی انجام بدیم:

let officersIds = [];

officers.forEach(function (officer) {
  officersIds.push(officer.id);
});

اگر از ES6 استفاده کنیم همچین کاریی باید انجام بدیم:

const officersIds = officers.map(officer => officer.id);

سعی میکنم یه پست دیگه حاضر کنم براتون که از ES next بیشتر بگم ولی مسلم هست که استفاده ازش چقدر کار مون رو آسون تر میکنه.

۲- انتخاب درست Component ها :

این مورد یکی از مهم ترین بخش های React هست و البته کمی پیچیده، همون طور که میدونید چندین روش برای تعریف کردن کامپوننت داریم تو React:

۱- کامپوننت های class based مثلا -> (class UsersPage extends React.Component)

همون طور که میدونید ما از کامپوننت های class based زمانی استفاده میکنیم که میخوایم state داشته باشیم تو کامپوننت...

خود این کامپوننت های class based به دو دسته‌ی Component و PureComponent دسته بندی میشن ولی فرق بین اینا چیه؟

فرق بین این دو فقط تو یه موردی هست اونم این که PureComponent متدshouldComponentUpdate رو برامون هندل میکنه یعنی وقتی props یا state ما تغییر کرد یه مقایسه سطحی بین nextProps یا nextState با state یا props فعلی میکنه و اگر تغییری مشاهده کرد فقط تو این مورد کامپونت ما رو رندر میکنه در غیر این صورت به همون حالت قبلی باقی می مونه.

استفاده درست و به جای PureComponent میتونه تاثییر بسازی تو پرفورمانس اپ ما داشته باشه.

۲- کامپوننت های functional

از این کامپوننت ها هم زمانی استفاده باید کرد که شما فقط میخواید JSX برگردونید و نیازی به state ندارید ولی میتونید به این کامپوننت ها props پاس بدید و باهاش کار کنید.

۳- نحوه درست import ها

در این مورد چیز زیادی نمیخوام بگم و بیشتر سلیقه شخصی هست ولی میتونه رو خوانایی کد تون تاثییر بسازی داشته باشه

همیشه سعی کنید dependency های اصلی رو بالاتر از همه import هاتون انجام بدید و بقیه رو زیر اونا مثل زیر:

// main imports
import React, {Component} from 'react'
import {connect} from 'react-redux'

// other  imports
import 'main_page.css'

۴- انواع حالت برای State Initialization

و اما بخش مهم این بخش از مقاله:

طبق best practice ها شما هر چقدر clean code داشته باشید بهتره.

تو React دو روش برای تعریف state تو کامپوننت ها داریم:

۱- داخل متد constructor

۲- بدون استفاده از متد constructor

همون طور که میبینید بدون constructor کد ما تمیز تره ولی شاید فکر کنید پس چه بلایی سر bind کردن متد هامون میاد مگه میشه که بدون constructor به کلاس اطلاعات بدیم؟

بله میشه React تو پس زمینه داره از babel استفاده میکنه که es6 رو به ورژن های پایین تر کامپایل میکنه تا مرورگر هانون بتونن کد های JS ما رو بخونن و اجراش کنن پس نگران نباشید babel پشت صحنه خودش این متد رو به کلاس شما اضافه میکنه

در مورد bind کردن this به متد هاتون هم تو روش دوم توصیه ام اینه که از arrow function ها استفاده بکنید تا نیازی به bind کردن نداشته باشید.

خیلی ممنون که وقت گذاشتید و این پست رو خوندید ممنون میشم نظراتتون رو برام بنویسید و منتظر پست های بعدی ازم باشید :)