رد عمل میں کلاس کے اجزاء اور فنکشنل اجزاء کے درمیان انتخاب کرنا

بنیادی اختلافات

React میں، ایک جزو کوڈ کا ایک ٹکڑا ہے جو صارف کے انٹرفیس کے ایک حصے کی نمائندگی کرتا ہے۔ React میں اجزاء کی دو اہم اقسام ہیں: کلاس اجزاء اور فعال اجزاء۔

کلاس کے اجزاء کی وضاحت ایک کلاس کا استعمال کرتے ہوئے کی جاتی ہے جو React.Component کلاس کو بڑھاتی ہے۔ وہ زیادہ خصوصیت سے مالا مال ہیں اور ریاست اور لائف سائیکل کے واقعات سے نمٹنے کے لیے زیادہ اختیارات رکھتے ہیں۔ کلاس کا جزو اس طرح دکھتا ہے:

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

فنکشنل اجزاء صرف JavaScript کے فنکشنز ہیں جو React عنصر کو لوٹاتے ہیں۔ وہ کلاس کے اجزاء سے زیادہ آسان ہیں اور پڑھنے اور لکھنے میں آسان ہیں۔ یہاں وہی جزو ہے جیسا کہ اوپر لکھا گیا ہے، ایک فعال جزو کے طور پر لکھا گیا ہے:

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

کب کیا استعمال کریں۔

عام طور پر، آپ کو فنکشنل اجزاء کا استعمال کرنا چاہئے جب تک کہ آپ کو ایسی خصوصیت استعمال کرنے کی ضرورت نہ ہو جو صرف کلاس اجزاء، جیسے ریاست یا لائف سائیکل طریقوں میں دستیاب ہو۔
چند ہیں وجوہات آپ کیوں ترجیح دے سکتے ہیں فنکشنل اجزاء پر کلاس اجزاء کا استعمال:

1. پڑھنے کی صلاحیت: کلاس کے اجزاء کوڈ کو سمجھنا آسان بنا سکتے ہیں، خاص طور پر اگر آپ کے پاس بہت سارے ریاستی یا لائف سائیکل طریقے ہیں۔ کوڈ کو ان طریقوں میں ترتیب دیا گیا ہے جو واضح طور پر بیان کیے گئے ہیں اور تلاش کرنے میں آسان ہیں۔

2. دوبارہ پریوست: کلاس کے اجزاء کو زیادہ آسانی سے دوبارہ استعمال کیا جا سکتا ہے، کیونکہ انہیں نئے اجزاء بنانے کے لیے بڑھایا جا سکتا ہے۔ یہ خاص طور پر مفید ہو سکتا ہے اگر آپ کے پاس اجزاء کے درمیان بہت زیادہ مشترکہ فعالیت ہو۔

3. تنظیم: کلاس کے اجزاء آپ کے کوڈ کو منظم کرنا آسان بنا سکتے ہیں، کیونکہ آپ متعلقہ طریقوں کو ایک ہی جزو میں ایک ساتھ گروپ کر سکتے ہیں۔ اس سے کوڈ کو تلاش کرنا اور اسے برقرار رکھنا آسان ہو سکتا ہے۔

کچھ وجوہات بھی ہیں جن کی وجہ سے آپ لکھنا چاہتے ہیں۔ فعال اجزاء:

1. جب آپ کو ریاست یا لائف سائیکل کے طریقے استعمال کرنے کی ضرورت نہیں ہے: اگر آپ کو ریاست یا لائف سائیکل کے طریقے استعمال کرنے کی ضرورت نہیں ہے، تو ایک فنکشنل جزو ایک اچھا انتخاب ہے، کیونکہ یہ کلاس کے اجزاء کے مقابلے میں پڑھنا اور لکھنا آسان اور آسان ہے۔

2. جب آپ کو خالص اجزاء کی ضرورت ہوتی ہے: فنکشنل اجزاء "خالص" اجزاء ہوتے ہیں، مطلب یہ ہے کہ وہ صرف اپنے پرپس پر منحصر ہوتے ہیں اور ان کی اپنی حالت نہیں ہوتی ہے۔ یہ مفید ہو سکتا ہے اگر آپ اس بات کو یقینی بنانا چاہتے ہیں کہ کوئی جزو صرف اس وقت ری رینڈر ہوتا ہے جب اس کے پرپس تبدیل ہوتے ہیں۔

3. جب آپ کارکردگی کو بہتر بنانا چاہتے ہیں: چونکہ فنکشنل اجزاء خالص ہوتے ہیں، انہیں React کے ذریعے زیادہ آسانی سے بہتر بنایا جا سکتا ہے، جس کے نتیجے میں کارکردگی بہتر ہو سکتی ہے۔

4. جب آپ مختصر، پڑھنے میں آسان کوڈ لکھنا چاہتے ہیں: چونکہ فعال اجزاء آسان ہوتے ہیں اور ان میں حرکت پذیر حصے کم ہوتے ہیں، اس لیے انہیں پڑھنے اور سمجھنے میں آسانی ہو سکتی ہے، خاص طور پر اگر آپ کی درخواست میں بہت سارے اجزاء ہوں۔

عام طور پر، آپ کو فنکشنل اجزاء کا استعمال کرنا چاہئے جب تک کہ آپ کو کوئی خاص ضرورت نہ ہو جو صرف کلاس کے اجزاء سے پوری کی جاسکتی ہے۔

استعمال کریں اثر اور استعمال ریاست

تاہم، یہ نوٹ کرنا ضروری ہے کہ آپ ریاست اور لائف سائیکل کے طریقوں کو فنکشنل اجزاء میں بھی استعمال کر سکتے ہیں۔ ریاست کا استعمال کریں اور اثر استعمال کریں ہکس عام طور پر، آپ کو اجزاء کی اس قسم کا انتخاب کرنا چاہیے جو آپ کی ضروریات کے لیے سب سے زیادہ معنی رکھتا ہے، اور یہ آپ کے کوڈ کو پڑھنے اور سمجھنے میں سب سے آسان بنائے گا۔

اگر آپ اب بھی اسٹیٹ یا لائف سائیکل ایونٹس کو نافذ کرنا چاہتے ہیں تو آپ کے پاس اپنے جزو کو فعال کرنے کے لیے ہکس استعمال کرنے کا امکان ہوگا۔

اس طرح آپ لاگو کریں گے۔ اثر استعمال کریں اور ریاست کا استعمال کریں آپ کے فعال اجزاء کے اندر

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> );
}

یہاں، ہمارے پاس ایک ایسا جزو ہے جو شمار پر نظر رکھتا ہے، اور صارف کو موجودہ شمار دکھاتا ہے۔ جزو استعمال کرتا ہے۔ ریاست کا استعمال کریں فنکشنل جزو میں ریاست شامل کرنے کے لیے ہک، اور اثر استعمال کریں جب گنتی میں تبدیلی آتی ہے تو ایک عمل (دستاویز کے عنوان کو اپ ڈیٹ کرنا) انجام دینے کے لیے ہک۔

کلیدی لے لو

جب ری ایکٹ میں کلاس کے اجزاء اور فعال اجزاء کے درمیان انتخاب کرنے کی بات آتی ہے تو یہ اہم راستے ہیں:

1. کلاس کے اجزاء کی تعریف ایک کلاس کا استعمال کرتے ہوئے کی جاتی ہے جو React.Component کلاس کو بڑھاتی ہے، اور اس کے پاس ریاست اور لائف سائیکل کے واقعات کو سنبھالنے کے لیے مزید اختیارات ہوتے ہیں۔
2. فنکشنل اجزاء صرف JavaScript کے فنکشنز ہیں جو React عنصر کو لوٹاتے ہیں، اور پڑھنے اور لکھنے میں آسان اور آسان ہوتے ہیں۔
3. آپ کو فنکشنل اجزاء استعمال کرنے چاہئیں جب تک کہ آپ کو ایسی خصوصیت استعمال کرنے کی ضرورت نہ ہو جو صرف کلاس کے اجزاء میں دستیاب ہو، جیسے کہ ریاست یا لائف سائیکل کے طریقے۔
4. آپ اسٹیٹ کو شامل کرنے اور فنکشنل اجزاء میں ضمنی اثرات انجام دینے کے لیے useState اور useEffect ہکس کا استعمال کر سکتے ہیں۔
5. مجموعی طور پر، کلاس کے اجزاء اور فعال اجزاء کے درمیان انتخاب اس بات پر آتا ہے کہ آپ کی ضروریات کے لیے کون سی چیز بہترین کام کرتی ہے اور کون سی چیز آپ کے کوڈ کو پڑھنے اور سمجھنے میں سب سے آسان بناتی ہے۔

مجھے امید ہے کہ یہ مختصر وضاحت آپ کی مدد کرے گی۔ اگر آپ جاوا اسکرپٹ، رد عمل یا ویب ڈیولپمنٹ سیکھنے کے لیے اپنے راستے پر رہنمائی یا کوئی رہنمائی چاہتے ہیں، تو براہ کرم بلا جھجھک مجھ سے 1:1 سیشن کے لیے رابطہ کریں۔

• SEO سے چلنے والا مواد اور PR کی تقسیم۔ آج ہی بڑھا دیں۔
• پلیٹو بلاک چین۔ Web3 Metaverse Intelligence. علم میں اضافہ۔ یہاں تک رسائی حاصل کریں۔
• ماخذ: https://www.codementor.io/maximiliangeiger/making-the-choice-between-class-components-and-functional-components-in-react-20uvaeyqci