انتخاب بین اجزای کلاس و اجزای عملکردی در React

تفاوت های اصلی

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

اجزای کلاس با استفاده از کلاسی که کلاس React.Component را گسترش می دهد، تعریف می شوند. آنها دارای ویژگی های غنی تر هستند و گزینه های بیشتری برای مدیریت رویدادهای حالت و چرخه حیات دارند. یک جزء کلاس به این صورت است:

class Welcome extends React.Component { render() { return <h1>Hello, {this.props.name}</h1>; }
}

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

function Welcome(props) { return <h1>Hello, {props.name}</h1>;
}

چه زمانی از چه چیزی استفاده کنیم

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

1. خوانایی: اجزای کلاس می توانند درک کد را آسان تر کنند، به خصوص اگر روش های حالت یا چرخه عمر زیادی دارید. کد به روش هایی سازماندهی شده است که به وضوح تعریف شده و یافتن آنها آسان است.

2. قابل استفاده مجدد: اجزای کلاس را می توان راحت تر مورد استفاده مجدد قرار داد، زیرا می توان آنها را برای ایجاد اجزای جدید گسترش داد. این می تواند به ویژه در صورتی مفید باشد که عملکردهای مشترک زیادی بین اجزا داشته باشید.

3. سازمان: مؤلفه‌های کلاس می‌توانند سازماندهی کد شما را آسان‌تر کنند، زیرا می‌توانید متدهای مرتبط را در یک مؤلفه با هم گروه‌بندی کنید. این می تواند یافتن و نگهداری کد را آسان تر کند.

همچنین چند دلیل وجود دارد که ممکن است بخواهید نوشتن را انتخاب کنید اجزای عملکردی:

1. زمانی که نیازی به استفاده از متدهای حالت یا چرخه حیات ندارید: اگر نیازی به استفاده از روش‌های حالت یا چرخه حیات ندارید، یک جزء تابعی انتخاب خوبی است، زیرا خواندن و نوشتن آن ساده‌تر و راحت‌تر از یک جزء کلاس است.

2. هنگامی که به یک جزء خالص نیاز دارید: اجزای عملکردی اجزای "خالص" هستند، به این معنی که آنها فقط به قطعات خود وابسته هستند و حالت خاص خود را ندارند. اگر می‌خواهید اطمینان حاصل کنید که یک مؤلفه تنها زمانی که ویژگی‌های آن تغییر می‌کند، دوباره ارائه می‌شود، می‌تواند مفید باشد.

3. هنگامی که می خواهید عملکرد را بهینه کنید: از آنجایی که اجزای عملکردی خالص هستند، می توان آنها را به راحتی توسط React بهینه کرد که ممکن است عملکرد بهتری را به همراه داشته باشد.

4. وقتی می‌خواهید کد مختصر و خوانا بنویسید: از آنجایی که اجزای کاربردی ساده‌تر هستند و قطعات متحرک کمتری دارند، خواندن و درک آن‌ها آسان‌تر است، به خصوص اگر اجزای زیادی در برنامه خود داشته باشید.

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

useEffect و useState

با این حال، توجه به این نکته مهم است که می‌توانید از روش‌های حالت و چرخه حیات در اجزای عملکردی نیز با استفاده از استفاده از ایالت و useEffect قلاب ها به طور کلی، شما باید نوع کامپوننتی را انتخاب کنید که بیشترین حس را برای نیازهای شما داشته باشد و کد شما را راحت‌تر خوانده و درک کنید.

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

این روشی است که شما پیاده سازی می کنید useEffect و استفاده از ایالت داخل اجزای عملکردی شما

import { useState, useEffect } from 'react'; function Example() { // Declare a new state variable, which we'll call "count" const [count, setCount] = useState(0); // Similar to componentDidMount and componentDidUpdate: useEffect(() => { // Update the document title using the browser API document.title = `Number of clicks: ${count}`; }); return ( <div> <p>Number of clicks: {count}</p> <button onClick={() => setCount(count + 1)}> Click me </button> </div> );
}

در اینجا، ما یک مؤلفه داریم که یک تعداد را ردیابی می کند و تعداد فعلی را به کاربر نمایش می دهد. کامپوننت از استفاده از ایالت قلاب برای اضافه کردن حالت به جزء عملکردی، و useEffect قلاب برای انجام یک عمل (به روز رسانی عنوان سند) زمانی که تعداد تغییر می کند.

گیرنده های کلیدی

در مورد انتخاب بین کامپوننت‌های کلاس و کامپوننت‌های عملکردی در React، اینها نکات اصلی هستند:

1. اجزای کلاس با استفاده از کلاسی تعریف می‌شوند که کلاس React.Component را گسترش می‌دهد و گزینه‌های بیشتری برای مدیریت رویدادهای حالت و چرخه حیات دارد.
2. اجزای تابعی فقط توابع جاوا اسکریپت هستند که یک عنصر React را برمی گرداند و خواندن و نوشتن آنها ساده تر و راحت تر است.
3. شما باید از کامپوننت‌های تابعی استفاده کنید، مگر اینکه نیاز به استفاده از ویژگی‌ای داشته باشید که فقط در مؤلفه‌های کلاس موجود است، مانند روش‌های حالت یا چرخه حیات.
4. می‌توانید از قلاب‌های useState و useEffect برای اضافه کردن حالت و انجام عوارض جانبی در اجزای عملکردی استفاده کنید.
5. به طور کلی، انتخاب بین اجزای کلاس و مؤلفه های عملکردی به این بستگی دارد که چه چیزی برای نیازهای شما مناسب است و چه چیزی کد شما را برای خواندن و درک راحت تر می کند.

امیدوارم این توضیح مختصر به شما کمک کند. اگر می خواهید در مسیر خود برای یادگیری جاوا اسکریپت، واکنش یا توسعه وب به طور کلی راهنمایی یا راهنمایی داشته باشید، لطفاً برای یک جلسه 1:1 با من تماس بگیرید.

• محتوای مبتنی بر SEO و توزیع روابط عمومی. امروز تقویت شوید.
• پلاتوبلاک چین. Web3 Metaverse Intelligence. دانش تقویت شده دسترسی به اینجا.
• منبع: https://www.codementor.io/maximiliangeiger/making-the-choice-between-class-components-and-functional-components-in-react-20uvaeyqci