5 مورد از بهترین ویژگی های React که در سال 2021 باید یاد بگیرید

ری اکت در سال گذشته با پیشرفت‌های زیادی مواجه بوده است و چندین ویژگی جدید ری اکت معرفی شده ­است. ما هم قصد داریم در این پست به  5 ویژگی که از بهترین ویژگی های React در سال 2021 بوده صحبت کنیم و آنرا بریتان معرفی کنیم. فقط قبل از آن این تکنولوژی را برا آن‌های که اطلاعی ندارند، توضیح خواهیم داد.

بهترین ویژگی های React

اول از همه ببینیم React چیست؟
در واقع React یا React JS یکی از کتابخانه‌های جاوا اسکریپت است که از سرعت و کیفیت بالایی برخوردار بوده این کتابخانه را فیسبوک و اینستاگرام نگهداری می‌کنند. این کتابخانه اوپن سورس بوده و کاملا رایگان در دسترس است. این کتابخانه به شما اجازه می‌دهد کامپوننت‌هایی را با قابلیت استفاده مجدد طراحی و ایجاد کنید.  حال می‌رویم سراغ بهترین ویژگی های React…

۱- اجزای عملکردی نسبت به اجزای کلاس

React همزمان با عرضه نسخه 16.8، مفهوم هوک را معرفی کرد. React Hook ها به ما امکان می­‌دهند تا از روش‌های state، Life cycle و سایر ویژگی­‌های React در یک مولفه کاربردی استفاده کنیم. پیش از این، استفاده از این ویژگی­‌ها فقط از طریق مولفه­‌های کلاس، امکان پذیر بود. Hookها به شما امکان می­‌دهند بدون نگرانی در مورد سلسله مراتب مولفه­‌ها، از منطق stateful استفاده مجدد بکنید. به نظر من این یک پیروزی بزرگ برای React است زیرا اکنون با ­hook های موجود، مدیریت داده‌­ها بسیار آسان می‌­شود.

شما مجبور نیستید که همه اجزای کلاس خود را به اجزای عملکردی تبدیل کنید. React چنین چیزی را توصیه نمی‌کند. در عوض می‌­توانید از اجزای عملکردی و hookهای اهرمی برای مدیریت state استفاده کنید. در زیر مثالی از یک مولفه کلاس آورده­ شده که نشان می‌دهد وقتی مولفه کلاس با مولفه کاربردی جایگزین می‌­شود چه اتفاقی می‌افتد.

مولفه کلاس

import React from &quotreact"

class YesNoComponent extends React.Component {
state = {
buttonPressed: “”
};

onYesPress() {
this.setState({ buttonPressed: “Yes” });
console.log(“Yes was pressed”);
}

onNoPress() {
this.setState({ buttonPressed: “No” });
console.log(“No was pressed”);
}

render() {
return (

this.onYesPress()}>Yes
this.onNoPress()}>No

);
}
}

export default YesNoComponent;

مولفه کاربردی با hookها

import React, { useState } from “react”;

const YesNoComponentFunctional = () => {
const [button, setButton] = useState(“”);

const onYesPress = () => {
setButton(“Yes”);
console.log({ button });
};

const onNoPress = () => {
setButton(“No”);
console.log({ button });
};

return (

onYesPress()}>Yes
onNoPress()}>No

);
};

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

۲- توابع Higher Order برای DRY

از دیگر ویژگی های React در سال 2021 تابع Higher Order برای DRY است. یکی از راه‌هایی که به شما قابلیت استفاده مجدد یا Don’t Repeat Yourself (DRY) را می‌­دهد، استفاده از مفهوم higher-order function (HOC) است. یعنی شما می‌­توانید بدون تکرار کد و با استفاده از HOC، عملکردهای مشترک را به اشتراک بگذارید.

در اینجا می‌بینید که HOCها در React چگونه به نظر می­‌رسند. HOC اساساً تابعی است که یک مولفه را به عنوان آرگومان می­‌گیرد و یک مولفه جدید را بر می­‌گرداند. همچنین می‌­تواند مولفه اصلی را که به عنوان آرگومان به آن داده شده است ارائه دهد.

function myHOC (myOtherComponent) {
return class extends React.Component {
render() {
return
}
}
}

HOCها به شما اجازه می ­دهند که کد خود را انتزاعی کنید. هنگامی که شما از قابلیت HOC ها آگاه شدید پس از آن، ممکن است خیلی از اوقات از این الگو استفاده کنید. گرچه استفاده از این توابع اختیاری است، اما به شما امکان می‌­دهند که تا حد خیلی زیادی قابلیت استفاده مجدد در کد خود داشته باشید. البته شما همیشه می‌­توانید اصول DRY را حتی بدون اجرای HOCها به کار بگیرید.

۳- PropTypes دوست شماست

شما می‌­توانید مولفه­‌ها را بدون PropTypes تعریف کنید. اما بدون PropTypes یا نوع دیگری از اعتبارسنجی، ممکن است داده‌­های اشتباه به یک مولفه وارد شود. این امر می­‌تواند باعث خرابی یا رفتار غیر منتظره در برنامه شما شود. من به شدت توصیه می­‌کنم از PropTypes در اجزای React خود استفاده کنید تا از اشتباهات غیر منتظره کاربر جلوگیری شود.

import PropTypes from 'prop-types'

const MyComponent = (props) => {
return (
// render something
)
}

// You can declare that a prop is a specific JS type.
MyComponent.propTypes = {
text: PropTypes.string.isRequired,
content: PropTypes.array.isRequired,
onPress: PropTypes.func.isRequired,
size: PropTypes.number.isRequired,
styles: PropTypes.object.isRequired,
isReady: PropTypes.bool.isRequired,
}

انواع مختلفی از اعتبارسنج­‌ها در مثال بالا وجود دارند (رشته، آرایه، تابع، عدد، boolو غیره ..). این اعتبارسنج­‌ها به شما امکان می­‌دهند اعلام کنید که یک prop از نوع Javascript خاص است. هر کسی که از این مولفه استفاده می­‌کند اکنون دیگر همه propها و typeهای نظیر مورد نیاز آن­ها را می­‌شناسد. وقتی type داده نادرستی به مولفه منتقل شود، React خطایی روی کنسول نشان می­‌دهد. این به ما امکان می‌دهد که در طول زمان کدنویسی، خطاها را پیدا کنیم و این خود یکی از بهترین ویژگی های React است.

۴- مولفه­ ها را کوچک و ساده نگه دارید

آیا تاکنون با مولفه­‌هایی با هزار خط کد مواجه شده‌­اید؟ پس حتما می‌­دانید که بهتر است تلاش کنید به جای یک مولفه با هزار خط کد، چندین مولفه ساده و کوچک داشته باشید. بهتر است مولفه شما کارهای زیادی انجام ندهد. یک مولفه در React، واحدی است که برای انجام یک کار در نظر گرفته شده و انتظار می­‌رود که ساده باشد. پس اگر به نظرتان یک مولفه طولانی و پیچیده است، باید آن را به چندین مولفه یا container تقسیم کنید. اجزای نمایشی و اجزای container را از هم جدا کنید.

من معمولا ترجیم می‌­دهم که یک پوشه/container و یک پوشه/مولفه­‌ی دیگر داشته باشم. مولفه­‌ها آنهایی هستند که کاملاً UI (ارائه ای) هستند وcontainerها آنهایی هستند که در انها به سختی کدی مربوط به UI پیدا می‌­شود و بیشتر حاوی منطقی پیچیده هستند.
با جدا نگه داشتن این دو از هم، مولفه‌­ها معمولاً کوچک و ساده می­‌شوند. این امر همچنین تست­ کردن مولفه­‌ها و containerهای منطقی را نیز آسان­‌تر می‌­کند.

۵- تست، تست، تست

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

• Unit Testing

Jest محبوب‌ترین چارچوب برای Unit Testing است. چارچوب­‌های دیگری مانند Mocha نیز وجود دارد که می‌­توانید از آنها استفاده کنید. Unit Testing ابتدایی‌­ترین شکل تست است که به شما امکان می‌دهد کوچکترین unitها را در کد خود تست کنید.

• Component Testing

همه چیز در React یک مولفه است و از رویکردهای مولفه پیروی می­‌کند. مولفه­‌های شما واحدهای قابل استفاده مجدد شخصی هستند که می‌­توانند به طور کارآمد تست شوند. این روش آزمایش در React بسیار مهم است.
Kent C.Dodd’s که کتابخانه تست React است یک راه حل سبک برای تست مولفه­‌های React است. این نرم افزار ساده، تست React DOM که بهترین روش برای تمرین تست کردن کد است را ارائه می­‌دهد. بسیاری از تیم­‌ها موفقیت خوبی در تست مولفه‌­های خود با این کتابخانه داشته‌­اند. اگر تاکنون از این کتابخانه‌ها استفاده نکرده‌­اید، حتما آنها را بررسی کنید.

• End to End Testing

این نوع تست اساساً کلیت برنامه را تست می­‌کند. این روش، اتفاقی که پس از کلیک ­کردن کاربر در مرورگر رخ می­‌دهد را شبیه‌­سازی می­‌کند. محبوب‌ترین و آسانترین چارچوبی که برای تست End to End در جاوا اسکریپت (یا هر زبان برنامه نویسی تحت وب دیگر) استفاده می‌شود، Cypress است. من از Cypress برای آزمایش برنامه­‌های frontend استفاده می­‌کنم. این چارچوب به راه اندازی کلی برنامه کمک می­‌کند. این روش تست باید در یک محیط واقعی در مرورگر انجام شود و من به شدت توصیه می­‌کنم که حتما این تست­‌ها را در برنامه React خود انجام دهید.

این مواردی که در بالا گفته شد همگی ویژگی های React در سال 2021 را شامل می‌شد. شما نیز با این ویژگی‌ها می‌توانید عملیات خود را بروز کرده و بهتر فعالیت کنید.

آیا می‌­خواهید یک برنامه نویس حرفه ای بشوید؟ پس در دوره های برنامه نویسی آنلاین من شرکت کنید. اگر این مقاله را دوست داشتید آن را با دوستانتان به اشتراک بگذارید.