رعایت 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 کردن نداشته باشید.خیلی ممنون که وقت گذاشتید و این پست رو خوندید ممنون میشم نظراتتون رو برام بنویسید و منتظر پست های بعدی ازم باشید :)